角度 - 反应形式 - 材料 - 无效时的颜色图标

Question

我正在 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;
}

Answer 1

试试

[class.red-icon]="wholeForm.controls.contact.controls['city'].invalid && wholeForm.controls.contact.controls['city'].touched"

Answer 2

使用此代码，

<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;
}