使用 mat-error 显示自定义验证器错误
Display custom validator error with mat-error
我来找你是为了讨论 angular material 的问题。其实我觉得是个问题，但我更愿意先找个误会。
关于我的问题的第一件事是上下文，我尝试做一个包含两个输入的简单表单：密码及其确认。
用户-form.component.ts
this.newUserForm = this.fb.group({
type: ['', Validators.required],
firstname: ['', Validators.required],
lastname: ['', Validators.required],
login: ['', Validators.required],
matchingPasswordsForm: this.fb.group(
{
password1: ['', Validators.required],
password2: ['', Validators.required],
},
{
validator: MatchingPasswordValidator.validate,
},
),
mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
cbaNumber: [
'411000000',
[Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
],
phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
}
我的兴趣是匹配PasswordsForm FormGroup。你可以在上面看到验证器。
这里是验证者：
匹配-password.validator.ts
export class MatchingPasswordValidator {
constructor() {}
static validate(c: FormGroup): ValidationErrors | null {
if (c.get('password2').value !== c.get('password1').value) {
return { matchingPassword: true};
}
return null;
}
}
和 HTML.
用户-form.component.html
<div class="row" formGroupName="matchingPasswordsForm">
<mat-form-field class="col-md-6 col-sm-12">
<input matInput placeholder="Mot de passe:" formControlName="password1">
<mat-error ngxErrors="matchingPasswordsForm.password1">
<p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6 col-sm-12">
<input matInput placeholder="Confirmez" formControlName="password2">
<mat-error ngxErrors="matchingPasswordsForm.password2">
<p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
</mat-error>
<!-- -->
<!-- problem is here -->
<!-- -->
<mat-error ngxErrors="matchingPasswordsForm" class="mat-error">
<p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-error>
<!-- ^^^^^^^^^^^^^^^^ -->
<!-- /problem is here -->
<!-- -->
</mat-form-field>
</div>
我用注释包围了有趣的代码。
现在，一些解释：使用标签，当触摸 password2 时，显示我的错误：
Password2 just touched
但是，当我输入错误的密码时，错误不再显示:
Wrong password2
首先我以为我误解了自定义验证器的使用。但是当我用整个东西替换时效果很好！
用提示替换错误
<mat-hint ngxErrors="matchinghPasswordsForm">
<p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-hint>
With mat-hint tag
我希望我说清楚了，在 material 设计 github.
上发布问题之前，我真的想要你的观点
如果我误解了什么，请点燃我误解的火花。
最后一件事，我的测试是用 ngxerrors 和 *ngif 完成的。为了更具可读性，我的代码示例仅使用 ngxerrors .
提前感谢您抽出宝贵时间。
Alex 是正确的。您必须使用 ErrorStateMatcher。我必须做大量研究才能弄清楚这一点，但没有一个来源能给我完整的答案。我不得不拼凑我从多个来源学到的信息来制定我自己的问题解决方案。希望下面的例子能让你从我经历过的头痛中解脱出来。
形式
这是一个使用 Angular Material 元素作为用户注册页面的表单示例。
<form [formGroup]="userRegistrationForm" novalidate>
<mat-form-field>
<input matInput placeholder="Full name" type="text" formControlName="fullName">
<mat-error>
{{errors.fullName}}
</mat-error>
</mat-form-field>
<div formGroupName="emailGroup">
<mat-form-field>
<input matInput placeholder="Email address" type="email" formControlName="email">
<mat-error>
{{errors.email}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Confirm email address" type="email" formControlName="confirmEmail" [errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmEmail}}
</mat-error>
</mat-form-field>
</div>
<div formGroupName="passwordGroup">
<mat-form-field>
<input matInput placeholder="Password" type="password" formControlName="password">
<mat-error>
{{errors.password}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Confirm password" type="password" formControlName="confirmPassword" [errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmPassword}}
</mat-error>
</mat-form-field>
</div>
<button mat-raised-button [disabled]="userRegistrationForm.invalid" (click)="register()">Register</button>
</form>
如您所见，我正在使用 Angular Material 中的 <mat-form-field>、<input matInput> 和 <mat-error> 标签。我的第一个想法是添加 *ngIf 指令来控制 <mat-error> 部分何时出现，但这没有效果！可见性实际上由 <mat-form-field> 的有效性（和“已触及”状态）控制，并且没有提供验证器来测试与 HTML 或 Angular 中的另一个表单字段是否相等。这就是确认字段中的 errorStateMatcher 指令发挥作用的地方。
errorStateMatcher 指令内置于 Angular Material，并提供使用自定义方法确定 <mat-form-field> 表单控件有效性的能力，并允许访问parent 的有效性状态来这样做。要开始了解我们如何将 errorStateMatcher 用于此用例，让我们首先看一下组件 class.
组件Class
这是一个 Angular 组件 class，它使用 FormBuilder 为表单设置验证。
export class App {
userRegistrationForm: FormGroup;
confirmValidParentMatcher = new ConfirmValidParentMatcher();
errors = errorMessages;
constructor(
private formBuilder: FormBuilder
) {
this.createForm();
}
createForm() {
this.userRegistrationForm = this.formBuilder.group({
fullName: ['', [
Validators.required,
Validators.minLength(1),
Validators.maxLength(128)
]],
emailGroup: this.formBuilder.group({
email: ['', [
Validators.required,
Validators.email
]],
confirmEmail: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual}),
passwordGroup: this.formBuilder.group({
password: ['', [
Validators.required,
Validators.pattern(regExps.password)
]],
confirmPassword: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual})
});
}
register(): void {
// API call to register your user
}
}
class为用户注册表设置一个FormBuilder。注意class里面有两个FormGroup，一个是确认邮箱，一个是确认密码。各个字段使用适当的验证器函数，但都在组级别使用自定义验证器，检查以确保每个组中的字段彼此相等，如果不相等，则 returns 验证错误。
组的自定义验证器和 errorStateMatcher 指令的组合为我们提供了适当显示确认字段验证错误所需的完整功能。让我们来看看自定义验证模块将它们整合在一起。
自定义验证模块
我选择将自定义验证功能分解到它自己的模块中，以便可以轻松地重复使用它。出于同样的原因，我还选择在该模块中放置与我的表单验证相关的其他内容，即正则表达式和错误消息。稍微提前考虑一下，您很可能也会允许用户在用户更新表单中更改他们的电子邮件地址和密码，对吗？这是整个模块的代码。
import { FormGroup, FormControl, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
/**
* Custom validator functions for reactive form validation
*/
export class CustomValidators {
/**
* Validates that child controls in the form group are equal
*/
static childrenEqual: ValidatorFn = (formGroup: FormGroup) => {
const [firstControlName, ...otherControlNames] = Object.keys(formGroup.controls || {});
const isValid = otherControlNames.every(controlName => formGroup.get(controlName).value === formGroup.get(firstControlName).value);
return isValid ? null : { childrenNotEqual: true };
}
}
/**
* Custom ErrorStateMatcher which returns true (error exists) when the parent form group is invalid and the control has been touched
*/
export class ConfirmValidParentMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return control.parent.invalid && control.touched;
}
}
/**
* Collection of reusable RegExps
*/
export const regExps: { [key: string]: RegExp } = {
password: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/
};
/**
* Collection of reusable error messages
*/
export const errorMessages: { [key: string]: string } = {
fullName: 'Full name must be between 1 and 128 characters',
email: 'Email must be a valid email address (username@domain)',
confirmEmail: 'Email addresses must match',
password: 'Password must be between 7 and 15 characters, and contain at least one number and special character',
confirmPassword: 'Passwords must match'
};
首先让我们看一下组的自定义验证器函数，CustomValidators.childrenEqual()。由于我有 object-oriented 编程背景，所以我选择将此函数设为静态 class 方法，但您也可以轻松地将其设为独立函数。该函数必须是 ValidatorFn 类型（或适当的文字签名），并采用 AbstractControl 类型或任何派生类型的单个参数。我选择制作它 FormGroup，因为这是它的用例。
该函数的代码遍历 FormGroup 中的所有控件，并确保它们的值都等于第一个控件的值。如果他们这样做，它 returns null （表示没有错误），否则 returns 一个 childrenNotEqual 错误。
所以现在当字段不相等时我们在组上有一个无效状态，但我们仍然需要使用该状态来控制何时显示我们的错误消息。我们的 ErrorStateMatcher ConfirmValidParentMatcher 可以为我们做这件事。 errorStateMatcher 指令要求您指向一个 class 的实例，它实现了 Angular Material 中提供的 ErrorStateMatcher class。这就是这里使用的签名。 ErrorStateMatcher 需要实现 isErrorState 方法，代码中显示了签名。它returnstrue或false； true表示存在错误，使输入元素的状态无效。
该方法单行代码非常简单；它 returns true （存在错误）如果 parent 控件（我们的 FormGroup）无效，但前提是该字段已被触摸。这与我们用于表单其余字段的 <mat-error> 的默认行为一致。
为了将它们整合在一起，我们现在有一个带有自定义验证器的 FormGroup，当我们的字段不相等时 returns 会出现错误，当组无效时会显示 <mat-error>。要查看此功能的实际效果，这里是一个有效的 plunker，其中包含上述代码的实现。
此外，我已经在博客上发布了这个解决方案 here。
obsessiveprogrammer 的回答对我来说是正确的，但是我不得不用 angular 6 和 strictNullChecks 更改 childrenEqual 函数（这是由angular 团队）对此：
static childrenEqual: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const f = control as FormGroup;
const [firstControlName, ...otherControlNames] = Object.keys(f.controls || {});
if(f.get(firstControlName) == null) {
return null;
}
otherControlNames.forEach(controlName => {
if(f.get(controlName) == null) {
return null;
}
})
const isValid = otherControlNames.every(controlName => f.get(controlName)!.value === f.get(firstControlName)!.value);
return isValid ? null : { childrenNotEqual: true };
}
如何创建自定义验证：
如果组件内部属性 'isValid'为false，则设置输入状态错误，并显示信息
HTML:
<input matInput
[formControl]="inputControl"
[placeholder]="placeholder"
[readonly]="readonly"
[errorStateMatcher]="matcher">
<mat-error *ngIf="!isValid">
Input not valid.
</mat-error>
TS:
isValid = true;
changeValitationStatus() {
this.matcher = new InputErrorStateMatcher(!this.isValid);
}
matcher = new InputErrorStateMatcher(!this.isValid);
class InputErrorStateMatcher implements ErrorStateMatcher {
constructor(private errorstate: boolean) {}
isErrorState(control: FormControl|null, form: FormGroupDirective|NgForm|null):boolean {
return this.errorstate;
}
}
这样您就可以仅使用 formControl 进行验证。
自定义错误是 Angular Material 表单的一部分，不需要外部库
向您的表单添加自定义验证器：
this.form = this.formBuilder.group({
formField: ['value', this.customValidator.bind(this)]
});
创建自定义验证器：
private customValidator(control: FormControl): void {
if (control.valid) {
if (someCondition === false) {
setTimeout(() => {
control.setErrors({ myCustomError: true });
});
}
}
}
向您的模板添加错误：
<!-- As part of the form input -->
<form [formGroup]="form">
<mat-form-field>
<mat-label>Form field</mat-label>
<input matInput formControlName="formField">
<mat-error *ngIf="form.get('formField').hasError('myCustomError')">Custom error message</mat-error>
</mat-form-field>
</form>
<!-- Outside of the form -->
<span *ngIf="form.get('formField').hasError('myCustomError')">Custom error message</span>
我来找你是为了讨论 angular material 的问题。其实我觉得是个问题，但我更愿意先找个误会。
关于我的问题的第一件事是上下文，我尝试做一个包含两个输入的简单表单：密码及其确认。
用户-form.component.ts
this.newUserForm = this.fb.group({
type: ['', Validators.required],
firstname: ['', Validators.required],
lastname: ['', Validators.required],
login: ['', Validators.required],
matchingPasswordsForm: this.fb.group(
{
password1: ['', Validators.required],
password2: ['', Validators.required],
},
{
validator: MatchingPasswordValidator.validate,
},
),
mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
cbaNumber: [
'411000000',
[Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
],
phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
}
我的兴趣是匹配PasswordsForm FormGroup。你可以在上面看到验证器。
这里是验证者：
匹配-password.validator.ts
export class MatchingPasswordValidator {
constructor() {}
static validate(c: FormGroup): ValidationErrors | null {
if (c.get('password2').value !== c.get('password1').value) {
return { matchingPassword: true};
}
return null;
}
}
和 HTML.
用户-form.component.html
<div class="row" formGroupName="matchingPasswordsForm">
<mat-form-field class="col-md-6 col-sm-12">
<input matInput placeholder="Mot de passe:" formControlName="password1">
<mat-error ngxErrors="matchingPasswordsForm.password1">
<p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6 col-sm-12">
<input matInput placeholder="Confirmez" formControlName="password2">
<mat-error ngxErrors="matchingPasswordsForm.password2">
<p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
</mat-error>
<!-- -->
<!-- problem is here -->
<!-- -->
<mat-error ngxErrors="matchingPasswordsForm" class="mat-error">
<p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-error>
<!-- ^^^^^^^^^^^^^^^^ -->
<!-- /problem is here -->
<!-- -->
</mat-form-field>
</div>
我用注释包围了有趣的代码。
现在，一些解释：使用标签，当触摸 password2 时，显示我的错误：
Password2 just touched
但是，当我输入错误的密码时，错误不再显示:
Wrong password2
首先我以为我误解了自定义验证器的使用。但是当我用整个东西替换时效果很好！
用提示替换错误
<mat-hint ngxErrors="matchinghPasswordsForm">
<p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-hint>
With mat-hint tag
我希望我说清楚了，在 material 设计 github.
上发布问题之前，我真的想要你的观点如果我误解了什么，请点燃我误解的火花。
最后一件事，我的测试是用 ngxerrors 和 *ngif 完成的。为了更具可读性，我的代码示例仅使用 ngxerrors .
提前感谢您抽出宝贵时间。
Alex 是正确的。您必须使用 ErrorStateMatcher。我必须做大量研究才能弄清楚这一点，但没有一个来源能给我完整的答案。我不得不拼凑我从多个来源学到的信息来制定我自己的问题解决方案。希望下面的例子能让你从我经历过的头痛中解脱出来。
形式
这是一个使用 Angular Material 元素作为用户注册页面的表单示例。
<form [formGroup]="userRegistrationForm" novalidate>
<mat-form-field>
<input matInput placeholder="Full name" type="text" formControlName="fullName">
<mat-error>
{{errors.fullName}}
</mat-error>
</mat-form-field>
<div formGroupName="emailGroup">
<mat-form-field>
<input matInput placeholder="Email address" type="email" formControlName="email">
<mat-error>
{{errors.email}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Confirm email address" type="email" formControlName="confirmEmail" [errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmEmail}}
</mat-error>
</mat-form-field>
</div>
<div formGroupName="passwordGroup">
<mat-form-field>
<input matInput placeholder="Password" type="password" formControlName="password">
<mat-error>
{{errors.password}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Confirm password" type="password" formControlName="confirmPassword" [errorStateMatcher]="confirmValidParentMatcher">
<mat-error>
{{errors.confirmPassword}}
</mat-error>
</mat-form-field>
</div>
<button mat-raised-button [disabled]="userRegistrationForm.invalid" (click)="register()">Register</button>
</form>
如您所见，我正在使用 Angular Material 中的 <mat-form-field>、<input matInput> 和 <mat-error> 标签。我的第一个想法是添加 *ngIf 指令来控制 <mat-error> 部分何时出现，但这没有效果！可见性实际上由 <mat-form-field> 的有效性（和“已触及”状态）控制，并且没有提供验证器来测试与 HTML 或 Angular 中的另一个表单字段是否相等。这就是确认字段中的 errorStateMatcher 指令发挥作用的地方。
errorStateMatcher 指令内置于 Angular Material，并提供使用自定义方法确定 <mat-form-field> 表单控件有效性的能力，并允许访问parent 的有效性状态来这样做。要开始了解我们如何将 errorStateMatcher 用于此用例，让我们首先看一下组件 class.
组件Class
这是一个 Angular 组件 class，它使用 FormBuilder 为表单设置验证。
export class App {
userRegistrationForm: FormGroup;
confirmValidParentMatcher = new ConfirmValidParentMatcher();
errors = errorMessages;
constructor(
private formBuilder: FormBuilder
) {
this.createForm();
}
createForm() {
this.userRegistrationForm = this.formBuilder.group({
fullName: ['', [
Validators.required,
Validators.minLength(1),
Validators.maxLength(128)
]],
emailGroup: this.formBuilder.group({
email: ['', [
Validators.required,
Validators.email
]],
confirmEmail: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual}),
passwordGroup: this.formBuilder.group({
password: ['', [
Validators.required,
Validators.pattern(regExps.password)
]],
confirmPassword: ['', Validators.required]
}, { validator: CustomValidators.childrenEqual})
});
}
register(): void {
// API call to register your user
}
}
class为用户注册表设置一个FormBuilder。注意class里面有两个FormGroup，一个是确认邮箱，一个是确认密码。各个字段使用适当的验证器函数，但都在组级别使用自定义验证器，检查以确保每个组中的字段彼此相等，如果不相等，则 returns 验证错误。
组的自定义验证器和 errorStateMatcher 指令的组合为我们提供了适当显示确认字段验证错误所需的完整功能。让我们来看看自定义验证模块将它们整合在一起。
自定义验证模块
我选择将自定义验证功能分解到它自己的模块中，以便可以轻松地重复使用它。出于同样的原因，我还选择在该模块中放置与我的表单验证相关的其他内容，即正则表达式和错误消息。稍微提前考虑一下，您很可能也会允许用户在用户更新表单中更改他们的电子邮件地址和密码，对吗？这是整个模块的代码。
import { FormGroup, FormControl, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
/**
* Custom validator functions for reactive form validation
*/
export class CustomValidators {
/**
* Validates that child controls in the form group are equal
*/
static childrenEqual: ValidatorFn = (formGroup: FormGroup) => {
const [firstControlName, ...otherControlNames] = Object.keys(formGroup.controls || {});
const isValid = otherControlNames.every(controlName => formGroup.get(controlName).value === formGroup.get(firstControlName).value);
return isValid ? null : { childrenNotEqual: true };
}
}
/**
* Custom ErrorStateMatcher which returns true (error exists) when the parent form group is invalid and the control has been touched
*/
export class ConfirmValidParentMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return control.parent.invalid && control.touched;
}
}
/**
* Collection of reusable RegExps
*/
export const regExps: { [key: string]: RegExp } = {
password: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/
};
/**
* Collection of reusable error messages
*/
export const errorMessages: { [key: string]: string } = {
fullName: 'Full name must be between 1 and 128 characters',
email: 'Email must be a valid email address (username@domain)',
confirmEmail: 'Email addresses must match',
password: 'Password must be between 7 and 15 characters, and contain at least one number and special character',
confirmPassword: 'Passwords must match'
};
首先让我们看一下组的自定义验证器函数，CustomValidators.childrenEqual()。由于我有 object-oriented 编程背景，所以我选择将此函数设为静态 class 方法，但您也可以轻松地将其设为独立函数。该函数必须是 ValidatorFn 类型（或适当的文字签名），并采用 AbstractControl 类型或任何派生类型的单个参数。我选择制作它 FormGroup，因为这是它的用例。
该函数的代码遍历 FormGroup 中的所有控件，并确保它们的值都等于第一个控件的值。如果他们这样做，它 returns null （表示没有错误），否则 returns 一个 childrenNotEqual 错误。
所以现在当字段不相等时我们在组上有一个无效状态，但我们仍然需要使用该状态来控制何时显示我们的错误消息。我们的 ErrorStateMatcher ConfirmValidParentMatcher 可以为我们做这件事。 errorStateMatcher 指令要求您指向一个 class 的实例，它实现了 Angular Material 中提供的 ErrorStateMatcher class。这就是这里使用的签名。 ErrorStateMatcher 需要实现 isErrorState 方法，代码中显示了签名。它returnstrue或false； true表示存在错误，使输入元素的状态无效。
该方法单行代码非常简单；它 returns true （存在错误）如果 parent 控件（我们的 FormGroup）无效，但前提是该字段已被触摸。这与我们用于表单其余字段的 <mat-error> 的默认行为一致。
为了将它们整合在一起，我们现在有一个带有自定义验证器的 FormGroup，当我们的字段不相等时 returns 会出现错误，当组无效时会显示 <mat-error>。要查看此功能的实际效果，这里是一个有效的 plunker，其中包含上述代码的实现。
此外，我已经在博客上发布了这个解决方案 here。
obsessiveprogrammer 的回答对我来说是正确的，但是我不得不用 angular 6 和 strictNullChecks 更改 childrenEqual 函数（这是由angular 团队）对此：
static childrenEqual: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
const f = control as FormGroup;
const [firstControlName, ...otherControlNames] = Object.keys(f.controls || {});
if(f.get(firstControlName) == null) {
return null;
}
otherControlNames.forEach(controlName => {
if(f.get(controlName) == null) {
return null;
}
})
const isValid = otherControlNames.every(controlName => f.get(controlName)!.value === f.get(firstControlName)!.value);
return isValid ? null : { childrenNotEqual: true };
}
如何创建自定义验证：
如果组件内部属性 'isValid'为false，则设置输入状态错误，并显示信息
HTML:
<input matInput [formControl]="inputControl" [placeholder]="placeholder" [readonly]="readonly" [errorStateMatcher]="matcher"> <mat-error *ngIf="!isValid"> Input not valid. </mat-error>
TS:
isValid = true; changeValitationStatus() { this.matcher = new InputErrorStateMatcher(!this.isValid); } matcher = new InputErrorStateMatcher(!this.isValid); class InputErrorStateMatcher implements ErrorStateMatcher { constructor(private errorstate: boolean) {} isErrorState(control: FormControl|null, form: FormGroupDirective|NgForm|null):boolean { return this.errorstate; } }
这样您就可以仅使用 formControl 进行验证。
自定义错误是 Angular Material 表单的一部分，不需要外部库
向您的表单添加自定义验证器：
this.form = this.formBuilder.group({
formField: ['value', this.customValidator.bind(this)]
});
创建自定义验证器：
private customValidator(control: FormControl): void {
if (control.valid) {
if (someCondition === false) {
setTimeout(() => {
control.setErrors({ myCustomError: true });
});
}
}
}
向您的模板添加错误：
<!-- As part of the form input -->
<form [formGroup]="form">
<mat-form-field>
<mat-label>Form field</mat-label>
<input matInput formControlName="formField">
<mat-error *ngIf="form.get('formField').hasError('myCustomError')">Custom error message</mat-error>
</mat-form-field>
</form>
<!-- Outside of the form -->
<span *ngIf="form.get('formField').hasError('myCustomError')">Custom error message</span>