multiple custom validators in reactive form angular 2

Question

I have two custom validator in a reactive form, I call function below to create form in component constructor:

private createForm(): void {
this.passwordUpdateForm = this.formBuilder.group({
    newpassword : [null, Validators.required],
    passwordconfirm: [null, Validators.required]
},
{
    validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule] // validation method

});

}

PasswordValidation is a class with two functions like below

    export class PasswordValidation {

     public  static PasswordMatch(control: AbstractControl) {
        let password = control.get('newpassword'); // to get value in input tag
        if(password){
            let confirmPassword = control.get('passwordconfirm').value; // to get value in input tag
            if (password.value !== confirmPassword) {
                control.get('passwordconfirm').setErrors({ ['passwordmatch'] : true});
            }else {
                return null;
            }
        }
    }

    public static PasswordRule(control: AbstractControl) {
        let password = control.get('newpassword').value; // to get value in input tag
        let pattern = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,64}');               
        if (!pattern.test(password)) {
            control.get('newpassword').setErrors({ ['passwordrule'] : true});
        }else if (password.toLowerCase() === 'something') {
            control.get('newpassword').setErrors({ ['passwordrule'] : true});
        }else {
            return null;
        }
    }
}

each custom validator works fine separately like this

validator: PasswordValidation.PasswordMatch

or this

validator: PasswordValidation.PasswordRule

but using both of them in array like

validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule]

get error this.validator is not a function and does not work, I do not have any idea, please help.

can you try with `Validators.compose() `which accepts multiple validators against one field. — Niladri, Sep 09 '17 at 12:19
Yes use compose(): validator: Validators.compose([[PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule])} — Vega, Sep 09 '17 at 15:39
@Vega O It is working, thanks. your comment made me to check it again,I was so bored! thank you so much — Paridokht, Sep 09 '17 at 17:46

Niladri · Accepted Answer · 2017-09-09T12:30:10.190

its better to use Validators.compose([]) which accepts the array of validators to be used on the specific user control in the form group.

for example if you want to add the validators against the passwordconfirm and newpassword control you can do it like below

private createForm(): void {
this.passwordUpdateForm = this.formBuilder.group({
    newpassword : [null, Validators.compose([Validators.required,PasswordValidation.PasswordRule])],
    passwordconfirm: [null, Validators.compose([Validators.required, PasswordValidation.PasswordMatch])]
});

under the hood this is what the code looks like

group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null): FormGroup {
  const controls = this._reduceControls(controlsConfig);
  const validator: ValidatorFn = isPresent(extra) ? extra['validator'] : null;
  const asyncValidator: AsyncValidatorFn = isPresent(extra) ? extra['asyncValidator'] : null;
  return new FormGroup(controls, validator, asyncValidator);
}

you can see the paramater validator is actually a type of interface ValidatorFn which looks like below

interface ValidatorFn { 
  (c: AbstractControl): ValidationErrors|null
}

so you can see it can accept any method that has the above signature.

Source : https://angular.io/api/forms/ValidatorFn

Check this link for more : https://toddmotto.com/reactive-formgroup-validation-angular-2

I've tested it, but no success because `validators.compose` accepts validarots which returns `observable` or `promise` :/ — Paridokht, Sep 09 '17 at 12:22
@Parid0kht I think you are talking about async validators but from your code you are using only static sync validators. For sync validators Observable or Promise is not required. I have updated my answer with the explanation why you are not able to pass the validators as an array to the `formbuilder.group() ` method. — Niladri, Sep 09 '17 at 12:32

multiple custom validators in reactive form angular 2

1 Answers1