Question

任何人都可以指导一下组织自定义验证器的最佳方法，这些验证器用于Angular 2应用程序的不同功能（用于模型驱动的表单）：

将它们定义为简单的验证函数
为每种类型的验证器提供静态方法的类，然后导入并在不同组件中使用它。
定义一个服务，为每个验证器定义不同的方法，然后将其添加到AppModule的提供程序中，并在不同的用户中使用申请的特点？

还是其他方法？

Answer 1

您可以在模型驱动的表单中为自定义验证器创建指令，如

    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;
    }
}

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

1 个答案: