Angular 2 reactive form custom validation

Question

I have 4 form fields and i want to check whether the 'oldpass' and 'newpass' fields are same using reactive form.

this.changePasswordForm = fb.group({
     'oldpass': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
     'newpass': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
     'confirmpass': ['', Validators.compose([Validators.required])],
     'otp': ['']
   },{validator: CustomValidator.matchConfirmFields('newpass', 'confirmpass')});

And i am able to validate the 'newpass' and 'confirmpass' fields using the following code.

static matchConfirmFields(pass: string, confirmpass: string) {
      return (group: FormGroup): {[key: string]: any} => {
        let spass = group.controls[pass];
        let sconfirmpass = group.controls[confirmpass];

        if (spass.value !== sconfirmpass.value) {
          return {
            mismatchedPasswords: true
          };
        }
      }
    }

How do i validate 'oldpass' and 'newpass' fields similar way.

thanks misha..but how do i call second validator for 'oldpass' and 'newpass'. can u please help on this — vishnu
– vishnu, Commented May 27, 2017 at 8:20

misha130 · Accepted Answer · 2017-05-27 08:37:13Z

1

My answer changes the way the validators in your FormGroup. First we'll add a new validator function to your class. It only compares an abstract control to a string, nothing special There is an option for equal or is not equal.

 public confirmPasswordValidator(control: AbstractControl, compareValue: string, equal: boolean = true): null | {} {
    if ((control.value === compareValue) === equal) {
      return null;
    }
    return {
      confirmPassword: {
        valid: false
      }
    }
  }

Now in the FormGroup we add it to the Controls we want to add it to all controls that use it and signify what to do with it.

this.changePasswordForm = fb.group({
  'oldpass': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
  'newpass': ['', Validators.compose([Validators.required, Validators.minLength(6),
  (control) => this.confirmPasswordValidator(control, this.changePasswordForm ? this.changePasswordForm.controls['oldpass'].value : '', false)])],
  'confirmpass': ['', Validators.compose([Validators.required,
  (control) => this.confirmPasswordValidator(control, this.changePasswordForm ? this.changePasswordForm.controls['newpass'].value : '')
  ])],
  'otp': ['']
});

answered May 27, 2017 at 8:37

misha130

5,7862 gold badges31 silver badges55 bronze badges

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

1 Comment

misha130 Over a year ago

@vishnu if I did misunderstand your question, feel free to tell me and I'll delete this

Collectives™ on Stack Overflow

Angular 2 reactive form custom validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related