[英]Angular - reactive form - material - color icon when invalid
我正在准备 Angular 中的反应形式(使用 Material),当字段无效时,我会为图标着色。
component class
wholeForm = new FormGroup({
...
contact: new FormGroup({
...
city: new FormControl('', [Validators.required])
}),
...
});
component html template
<form [formGroup]='wholeForm' (ngSubmit)='onSubmit()'>
...
<div class="form-group" formGroupName="contact">
...
<div class='code-city'>
<mat-form-field>
<input formControlName="postalCode" matInput maxlength="5" placeholder="postal code*">
</mat-form-field>
<mat-form-field>
<input formControlName="city" matInput placeholder="city*">
<mat-icon matSuffix>location_on</mat-icon>
</mat-form-field>
</div>
我试图在city
输入和mat-icon
[class.red-icon]='city.invalid'
添加一些本地引用,但它没有用。 接下来我还尝试将类绑定到类中的属性,但没有结果。
当我硬编码为wholeForm.valid
时,CSS 类有效。
CSS
.red-icon{
color: red;
}
尝试
[class.red-icon]="wholeForm.controls.contact.controls['city'].invalid && wholeForm.controls.contact.controls['city'].touched"
使用此代码,
<div class='code-city'>
<mat-form-field>
<input formControlName="postalCode" matInput maxlength="5" placeholder="postal code*">
</mat-form-field>
<mat-form-field>
<input formControlName="city" matInput placeholder="city*">
<mat-icon matSuffix>location_on</mat-icon>
</mat-form-field>
</div>
并在style.css 中
.mat-form-field-invalid .mat-icon {
color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.