import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
// forbiddenNameValidator应用在响应式表单,可以作为创建FormControl时的参数,直接传进去
// ForbiddenValidatorDirective指令可以直接写在模板上,既可以应用在响应式表单,也可以应用在模板驱动表单
// 返回配置好的验证器函数(ValidatorFn)
// 该函数接受一个Angular控制器对象,并在控制器值有效时返回null,或无效时返回验证错误对象。
// 验证错误对象通常有一个名为验证秘钥(forbiddenName)的属性。其值为一个任意词典,我们可以用来插入错误信息({name})。
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
const forbidden = nameRe.test(control.value);
return forbidden ? {'forbiddenName': {value: control.value}} : null;
};
}
@Directive({
selector: '[appForbiddenName]',
// 把自己注册到了NG_VALIDATORS提供商中,从而让该指令在验证的时候被调用。
providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator /*继承Validator属性*/ {
@Input() forbiddenName: string;
validate(control: AbstractControl): {[key: string]: any} {
return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
: null;
}
}