标签: angular-material
如何更改Angular Material 2 CSS导入顺序？
在使用Angular CLI构建的Angular 2应用程序中,我按照官方安装指南设置了Angular 2 Material组件.
Angular 2 Material将其主要CSS样式放在页面中,<head>总是低于我的自定义CSS样式.如果我需要覆盖它们,这会对我产生影响.
如何强制Angular 2 Material将其核心CSS样式置于我在Angular CLI main(entry)CSS文件中定义的样式之上？
推荐指数
解决办法
查看次数
Angular Material Datepicker:选择日期时更改事件未触发
我正在使用Angular和Angular Material的Datepicker.在大多数情况下,一切都运行良好,但是我添加了一个(change)仅在用户手动输入日期时才起作用的事件.当用户点击日期选择器弹出窗口中的日期时,它不会被触发.要明确的是,date当用户点击日期时,事实上的值会发生变化,这只是(change)事件,最终我的updateCalcs()功能由于某种原因不会被触发.当用户点击日期选择器中的日期时,如何触发事件？
<md-input-container>
<input mdInput [mdDatepicker]="datePicker" placeholder="Choose Date" name="date" [(ngModel)]="date" (change)="updateCalcs()" required>
<button mdSuffix [mdDatepickerToggle]="datePicker"></button>
</md-input-container>
<md-datepicker #datePicker></md-datepicker>
推荐指数
解决办法
查看次数
如何在mat-radio-group角度反应形式中绑定默认值
在我的情况下,它需要激活选项01作为默认选择.它使用checked = true属性,但值不与formControlName ="options"绑定,当用户选择任何选项时它绑定.如果没有任何用户选择选项值显示为"null".
<div class="row">
<mat-radio-group formControlName="options">
<mat-radio-button checked=true value="1">Option 01</mat-radio-button>
<mat-radio-button value="2">Option 02</mat-radio-button>
</mat-radio-group>
</div>
请帮我解决这个问题.谢谢.
推荐指数
解决办法
查看次数
以Angular(2+)包装FormControl
我正在尝试在Angular(v5)中创建自定义表单控件.自定义控件本质上是一个Angular Material组件的包装器,但还有一些额外的东西.
我已经阅读了有关实现的各种教程ControlValueAccessor,但是我找不到任何可以编写组件来包装现有组件的内容.
理想情况下,我想要一个显示Angular Material组件的自定义组件(带有一些额外的绑定和东西),但是能够从父表单传递验证(例如required)并让Angular Material组件处理它.
例:
外部组件,包含表单并使用自定义组件
<form [formGroup]="myForm">
<div formArrayName="things">
<div *ngFor="let thing of things; let i = index;">
<app-my-custom-control [formControlName]="i"></app-my-custom-control>
</div>
</div>
</form>
自定义组件模板
基本上我的自定义表单组件只包含一个Angular Material下拉列表和自动完成.我可以在不创建自定义组件的情况下执行此操作,但这样做似乎是有意义的,因为处理过滤等的所有代码都可以存在于该组件类中,而不是在容器类中(不需要)关心这个的实施).
<mat-form-field>
<input matInput placeholder="Thing" aria-label="Thing" [matAutocomplete]="thingInput">
<mat-autocomplete #thingInput="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
因此,在input更改时,应将该值用作表单值.
我尝试过的事情
我尝试了几种方法,都有自己的陷阱:
简单的事件绑定
绑定到事件keyup和blur事件input,然后通知父更改(即调用Angular传入的函数registerOnChange作为实现的一部分ControlValueAccessor).
这种方式有效,但是从下拉列表中选择一个值时,似乎更改事件不会触发,并且最终会处于不一致状态.
它也不考虑验证(例如,如果它是"必需的",当值为n时; t设置表单控件将正确无效,但Angular Material组件将不会如此显示).
嵌套表格
这有点接近了.我在自定义组件类中创建了一个新表单,它只有一个控件.在组件模板中,我将该表单控件传递给Angular Material组件.在类中,我订阅valueChanges …
推荐指数
解决办法
查看次数
如何组成Angular Material表单控件组件
下面的代码显示了一个允许选择美国州的自动填充表单控件.
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
但是,如果在我的应用程序中我有许多需要这种类型输入的位置,那么将它转换为一个组件(指令？)是有意义的,其中所有样板都不需要重复.但是,我仍然希望能够在模板驱动或模型驱动的表单中使用它,并允许容器组件改变占位符,验证等.
实现这一目标的简单而有力的方法是什么？
我尝试过为Angular推荐的一般方法,但它们没有考虑Angular Material的各种要求.例如,需要实现MatFormFieldControl.Angular Material提供的指导更多地是使用原始元素创建新的表单控件,而不是利用/包装现有的Angular Material表单控件.
目标是能够以这样的形式做这样的事情:
<mat-form-field>
<lookup-state placeholder="State of Residence" required="true" formControlName="resState">
</lookup-state>
</mat-form-field>
推荐指数
解决办法
查看次数
如何制作一个可主题化的Angular Material NPM模块？
是否可以构建一个使用Angular Material的npm模块,并允许它定义的组件由消费应用程序的自定义主题设置样式？
作为一个例子,假设我创建了一个包含具有以下模板的组件的npm模块:
<button mat-raised-button color="accent">Click me!</button>
是否可以将此组件导入两个不同的应用程序,每个应用程序定义一个自定义的Angular Material主题,并使按钮采用当前应用程序主题的"重音"颜色？
目前,我正在使用ng-packagr来构建Angular友好的npm模块.但是,据我所知,此模块包含一个.scss编译阶段作为打包过程的一部分,这意味着模块中定义的任何样式都无法通过使用该模块的应用程序中的主题进行自定义.
推荐指数
解决办法
查看次数
如何使用反应形式设置角材料芯片控制
我有一个带有角材料的角反应形式
对于我的所有控件，我添加了所需的验证器。
我不确定如何使用反应形式正确设置芯片控制。
您在哪里设置 formControlName 以便触发所需的验证器？目前我在输入字段上设置了它，我猜这是错误的。
我只希望 courseIds 是带有课程 ID 的逗号分隔字符串。
TS：
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
name: new FormControl("", [Validators.required]),
courseIds: new FormControl("", Validators.required)
});
}
HTML：
<form [formGroup]="form" (ngSubmit)="submit()">
<mat-form-field>
<input matInput type="text" formControlName="name" placeholder="Name">
</mat-form-field>
<mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let cid of courseIds" (removed) = "...">
{{cid}}
</mat-chip>
<input matInput formControlName="courseIds"
[matChipInputFor]="chipList"
placeholder="Ids"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
....
<button type="submit">OK</button>
</form>
推荐指数
解决办法
查看次数
“mat-chip-list”不是已知元素
我正在尝试在组件中使用 mat-chip 。在升级到 Angular 15 之前，我的代码曾经可以运行
我正在导入模块，这似乎是一个常见的错误
我想我已经根据文档包含了所有内容。
非常感谢您的帮助。谢谢
错误是：
Error: src/app/app.component.html:1:1 - error NG8001: 'mat-chip-list' is not a known element:
1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
1 <mat-chip-list>
~~~~~~~~~~~~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
版本信息是：
Angular CLI: 15.0.0-rc.3
Node: 16.14.0
Package …推荐指数
解决办法
查看次数
Angular v15 更新后如何处理旧版本
我确实将我的应用程序从 v14 更新到了 v15。
在更新中，我可以看到 Angular 发生了变化
// From
import { MatDialog } from '@angular/material/dialog'
// To
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
有人知道原因吗？我在他们的网站上搜索但找不到任何有用的东西。
我可以将其设置回之前的值吗？
推荐指数
解决办法
查看次数
角度材料.突出显示鼠标悬停的表格行
我们正在为我们的应用使用Angular Material表:
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
你能否展示如何在鼠标悬停上突出显示一行？
推荐指数
解决办法
查看次数