Блог

Может кто-нибудь подсказать, какой наилучший подход к организации пользовательских валидаторов, которые используются в различных функциях приложения 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 amp;amp; v !== e.value amp;amp; !this.isReverse) {
          return {
            validateEqual: false
          }
        }

        // value equal and reverse
        if (e amp;amp; v === e.value amp;amp; this.isReverse) {
            delete e.errors['validateEqual'];
            if (!Object.keys(e.errors).length) e.setErrors(null);
        }

        // value not equal and reverse
        if (e amp;amp; v !== e.value amp;amp; this.isReverse) {
            e.setErrors({
                validateEqual: false
            })
        }

        return null;
    }
}