如何触发 Material2 <mat-error> 在输入更改时显示

How to trigger Material2 <mat-error> to be displayed on input-change

https://material.angular.io/components/form-field/overview

为例
<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>


import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css']
})
export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}

错误似乎是在模糊时触发的。只有在离开输入后才会出现错误。在我的应用程序中是一样的。在当前模式下,错误存在,但直到输入失去焦点后才会显示。

如何在输入改变时触发显示错误。

根据 docs 你需要使用 errorStateMatcher.

对你来说,看起来像这样:

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

并在您的组件中执行:

matcher = new MyErrorStateMatcher();

然后只需在您的输入字段中添加

[errorStateMatcher]="matcher"

StackBlitz

在你的组件中 class:

matcher = {
  isErrorState: () => {
    return this.statusField; // return Boolean status value
  }
};

然后只需在您的 matInput 字段中添加

[errorStateMatcher]="matcher"