* ngIf =“ name.invalid”不适用于Angular Material

Question

当我这样说的时候：

<textarea #name="ngModel" class="form-control" id="" cols="30" rows="3" style="resize:none" required></textarea>
<div *ngIf="name.invalid" class="alert alert-danger">
     <div *ngIf="name.errors.required">
            Name is required.
      </div>
</div>

当视图开始时我得到了这个：（没关系，我想要这样的东西，但是在Angular Material中...）

然后，当我放置此（角度材质）时：

<mat-form-field>
  <textarea matInput #name="ngModel" class="form-control" id="" cols="30" rows="3" style="resize:none" required></textarea>
  <mat-error *ngIf="name.invalid">Name is required.</mat-error>
</mat-form-field>

我明白了：

显然无效，但是什么也没发生，没有红色。当我手动聚焦和模糊该文本区域时，将出现<mat-error>。我希望此文本区域在开始时显示为无效：

我该怎么办？预先感谢。

Answer 1

mat-error元素仅在表单域控件验证失败时可见。

角度材质使用默认的ErrorStateMatcher检查该控件是否有效：

@Injectable({providedIn: 'root'})
export class ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.touched || (form && form.submitted)));
  }
}

如您所见，只有触摸控件或提交表单，该操作才会失败。

您可以通过在控件上使用errorStateMatcher输入来覆盖此行为：

html

<textarea matInput ... [errorStateMatcher]="matcher" required></textarea>

ts

import {ErrorStateMatcher} from '@angular/material/core';

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(
       control: FormControl | null,
       form: FormGroupDirective | NgForm | null): boolean {
    return control && control.invalid;
  }
} 

@Component({
  ...
})
export class AppComponent  {

  matcher = new MyErrorStateMatcher()
}

Ng-run Example