Angular - 反应形式 - material - 无效时的彩色图标

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' 中添加一些本地引用，但没有成功。接下来我还尝试将 class 绑定到 class 中的属性，但没有结果。

CSS class 有效，当我硬编码为 wholeForm.valid.

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