Angular 2 Custom Validators Best Approach

Question

Can anyone please guide what is the best approach to organize Custom Validators that are used across different features of the Angular 2 application (for Model driven forms):

Define them as simple validation functions
A class with static methods for each type of validator, and then import and use it in different components.
Define a service, with different methods for each validator, and then add it in providers of the AppModule and use across different features of application?

Or any other approach?

Savan2396 Savan2396 · Accepted Answer · 2018-04-11T13:03:19

You can make directive for custom validator in model driven forms like this,

    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 Custom Validators Best Approach

1 Answers