要使 Angular 进入自定义表单验证,需要确保以下几点:
例如,我们可以在组件中定义一个自定义验证器:
import { AbstractControl, ValidatorFn } from '@angular/forms';
export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const forbidden = forbiddenName.test(control.value);
return forbidden ? {'forbiddenName': {value: control.value}} : null;
};
}
例如,我们可以在模板中使用 ngModel
指令:
Name is required.
Name must be at least 4 characters long.
Name cannot be more than 25 characters long.
Name can only contain letters and spaces.
Name cannot be Bob.
NG_VALIDATORS
标记自己是一个验证器,并在 validate()
方法中实现自定义验证逻辑。例如,我们可以定义一个 appForbiddenNameValidator
指令:
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { forbiddenNameValidator } from './forbidden-name.validator';
@Directive({
selector: '[appForbiddenNameValidator]',
providers: [{ provide: NG_VALIDATORS, useExisting: ForbiddenNameValidatorDirective, multi: true }]
})
export class ForbiddenNameValidatorDirective implements Validator {
@Input('appForbiddenNameValidator') forbiddenName: string;
validate(control: AbstractControl): {[key: string]: any} | null {
return this.forbiddenName ? forbiddenNameValidator(new