Angular - 反應形式 - 材料 - 無效時的顏色圖標

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