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
– Niladri, Commented Sep 9, 2017 at 12:19
Yes use compose(): validator: Validators.compose([[PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule])} — Vega
– Vega, Commented Sep 9, 2017 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
– Paridokht, Commented Sep 9, 2017 at 17:46

Niladri · Accepted Answer · 2017-09-09 12:30:10Z

10

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

edited Sep 9, 2017 at 12:30

answered Sep 9, 2017 at 12:15

Niladri

5,9922 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paridokht Over a year ago

I've tested it, but no success because validators.compose accepts validarots which returns observable or promise :/

Niladri Over a year ago

@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.

Collectives™ on Stack Overflow

multiple custom validators in reactive form angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related