Angular 2自定义验证器最佳方法
任何人都可以指导组织Angular 2应用程序(用于模型驱动表单)不同功能中使用的自定义验证器的最佳方法是什么:Angular 2自定义验证器最佳方法,angular,angular2-forms,angular2-services,Angular,Angular2 Forms,Angular2 Services,任何人都可以指导组织Angular 2应用程序(用于模型驱动表单)不同功能中使用的自定义验证器的最佳方法是什么: 将它们定义为简单的验证函数 为每种类型的验证器提供静态方法的类,然后 导入并在不同组件中使用它 定义一个服务,每个验证器使用不同的方法,然后 将其添加到AppModule的提供程序中,并跨不同的应用程序使用 应用程序的特点 或者任何其他方法?您可以在模型驱动的表单中为自定义验证器生成指令,如下所示 import { Directive, forwardRef, Attri
- 将它们定义为简单的验证函数
- 为每种类型的验证器提供静态方法的类,然后 导入并在不同组件中使用它
- 定义一个服务,每个验证器使用不同的方法,然后 将其添加到AppModule的提供程序中,并跨不同的应用程序使用 应用程序的特点
或者任何其他方法?您可以在模型驱动的表单中为自定义验证器生成指令,如下所示
import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
]
})
export class EqualValidator implements Validator {
constructor( @Attribute('validateEqual') public validateEqual: string,
@Attribute('reverse') public reverse: string) {
}
private get isReverse() {
if (!this.reverse) return false;
return this.reverse === 'true' ? true: false;
}
validate(c: AbstractControl): { [key: string]: any } {
// self value
let v = c.value;
// control vlaue
let e = c.root.get(this.validateEqual);
// value not equal
if (e && v !== e.value && !this.isReverse) {
return {
validateEqual: false
}
}
// value equal and reverse
if (e && v === e.value && this.isReverse) {
delete e.errors['validateEqual'];
if (!Object.keys(e.errors).length) e.setErrors(null);
}
// value not equal and reverse
if (e && v !== e.value && this.isReverse) {
e.setErrors({
validateEqual: false
})
}
return null;
}
}