Angular 2自定义验证器最佳方法

Angular 2自定义验证器最佳方法,angular,angular2-forms,angular2-services,Angular,Angular2 Forms,Angular2 Services,任何人都可以指导组织Angular 2应用程序(用于模型驱动表单)不同功能中使用的自定义验证器的最佳方法是什么: 将它们定义为简单的验证函数 为每种类型的验证器提供静态方法的类,然后 导入并在不同组件中使用它 定义一个服务,每个验证器使用不同的方法,然后 将其添加到AppModule的提供程序中,并跨不同的应用程序使用 应用程序的特点 或者任何其他方法?您可以在模型驱动的表单中为自定义验证器生成指令,如下所示 import { Directive, forwardRef, Attri

任何人都可以指导组织Angular 2应用程序(用于模型驱动表单)不同功能中使用的自定义验证器的最佳方法是什么:

  • 将它们定义为简单的验证函数
  • 为每种类型的验证器提供静态方法的类,然后 导入并在不同组件中使用它
  • 定义一个服务,每个验证器使用不同的方法,然后 将其添加到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;
    }
}