如何触发 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"
以 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"