angular 8: Reactive Form match password

angular validation angular-reactive-forms

11,963

Solution 1

You can create a custom validator and use it in FormGroup like

    passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirmPassword').value) {
        return {invalid: true};
    }
}

And you need to use this custom validator like.

 this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
},{validator: this.passwordConfirming});

and check in html like

 <span *ngIf="createUserFormGroup.errors?.invalid">
      Password doesn't match
  </span>

Solution 2

For angular 7+ you can add a custom passwords match validator for your form :

private passwordsMatchValidator(form: FormGroup) {
    if (form.get('password') && form.get('confirmPassword')) {
        return form.get('password').value === form.get('confirmPassword').value ? null : { mismatch: true };
    }
    return null;
}

And then add it as a custom validator when creating your form :

this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
}, this.passwordsMatchValidator);

11,963

Author by

hosein

Updated on June 27, 2022

Comments

hosein almost 2 years

I have the reactive form in my angular project that defines like this:

this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
});

how can I check the matching of password and confirmPassword?

Prashant Pimpale almost 5 years

Is it a Library...?
Srishti Khandelwal almost 5 years

It's a npm package
Prashant Pimpale almost 5 years

Okay! but its always write your custom code (if the code and feature is not complex) instead of the library because in terms of Modification in the logic (which the library not provide) so you will have to revert the library changes. Please add the package URL in the answer
Srishti Khandelwal almost 5 years

@PrashantPimpale In the case of comparing field, there is no modification of logic required. In such cases, its better to use library for simplicity of implementation.
Prashant Pimpale almost 5 years

Seen its downloads and features! Thanks
Admin almost 5 years

@SrishtiKhandelwal I agree with him, password validation is a two-liner. You don't need a full library to do that.
Srishti Khandelwal almost 5 years

@Maryannah Its another benefit is the compare validator will not fire if the user enters a value in non comparison field, like as per dhaval answer this will fire non comparison field which is bit clumsy when the form is large. This is just my view, there may be better way than this.
Admin almost 5 years

Indeed, that's purely personal and library-based. But more importantly, that wasn't asked by the OP, so it's not really an argument to use it.
hosein almost 5 years

@PrashantPimpale Hi Prashant I add this code in my template but get this error: Cannot read property 'errors' of undefined
Srishti Khandelwal almost 5 years

@karim have you referred to the stackblitz example i shared ?
hosein almost 5 years

@PrashantPimpale yes I add the same code in my project
Srishti Khandelwal almost 5 years

@karim have you set the message in reactiveFormConfig in your app.component.ts
hosein almost 5 years

@PrashantPimpale yes I add it
Cafn about 3 years

At least in angular 10, validator should be "validators"