password and confirmpassword validation in angular using reactive forms

Question

i have attached my code below .im facing problem in adding password mismatch validation.im not getting validation error if i type mismatching password

register.component.html

<div class="form-group row mt-3">
 <label class="col-md-4 col-lg-4 text-center">UserName:<span style="color:red">*</span></label>
<input kendoTextBox required type="text" class="  col-md-6 col-lg-6 form-control " placeholder="Enter Your UserName " formControlName="username"/>
  <div *ngIf="(submitted||f2.username.touched) && f2.username.invalid" class="error-msg">
 <div *ngIf="f2.username.errors.required">UserName  is required</div>
 </div> </div>
 <div class="form-group row">
<label class="col-md-4 col-lg-4 text-center">Password:<span style="color:red">*</span></label>
<input kendoTextBox type="password" required  class="  col-md-6 col-lg-6 form-control " placeholder="Enter Your passowrd " formControlName="password"/>

 <div *ngIf="(submitted||f2.password.touched) && f2.password.invalid" class="error-msg">
<div *ngIf="f2.password.errors.required">password  is required</div>
<div *ngIf="f2.password.errors.minlength">minimum of 6 characters required</div>
    </div>
</div>
<div class="form-group row">
   <label class="col-md-4 col-lg-4 text-center">ConfirmPassword:
<span style="color:red">*</span></label>
<input kendoTextBox required type="password" class="  col-md-6 col-lg-6 form-control " placeholder="Enter Your new password " formControlName="confirmpassword"/>
 <div *ngIf="(submitted||f2.confirmpassword.touched) && f2.confirmpassword.invalid" class="error-msg">
 <div *ngIf="f2.confirmpassword.errors.required"> confirm password  is required</div>  <div *ngIf="f2.confirmpassword.errors.minlength">minimum of 6 characters required
</div>
<div class="error-msg" *ngIf="f2.errors?.mismatch && (f2.controls['confirmpassword'].required || f2.controls['confirmpassword'].touched)">
                              Passwords don't match.
</div>
                          </div>
                      </div>
    enter code here

registercomponent.ts file

here i have used formBuilder.other things are working fine ,only validation for mismatching not working

 this.registerForm3 = this.formBuilder.group({
    username:['', Validators.required],
    password: ['', [Validators.required, Validators.minLength(6)]],
    confirmpassword:['', [Validators.required, Validators.minLength(6)]],
  },
  {validator: this.passwordMatchValidator},
  );

passwordMatchValidator(frm: FormGroup) {
eturn frm.controls['password'].value === 
frm.controls['confirmpassword'].value ? null : {'mismatch': true};
    }
 get f2() { 
    return this.registerForm3.controls; 
  }

please refer stackoverflow.com/questions/51605737/…

Ajay Ojha
– Ajay Ojha

2018-12-11 08:15:20 +00:00
Commented Dec 11, 2018 at 8:15 — Ajay Ojha
– Ajay Ojha, Commented Dec 11, 2018 at 8:15

DeborahK · Accepted Answer · 2018-12-11 08:12:16Z

9

I didn't think that you could use a component member function (method) for your custom validator. I assumed it needed to be a function external from your class.

Mine looks like this:

function emailMatcher(c: AbstractControl): { [key: string]: boolean } | null {
  const emailControl = c.get('email');
  const confirmControl = c.get('confirmEmail');

  if (emailControl.pristine || confirmControl.pristine) {
    return null;
  }

  if (emailControl.value === confirmControl.value) {
    return null;
  }
  return { 'match': true };
}

And I attach the validator to a child formGroup like so:

this.customerForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: ['', Validators.required],
  }, { validator: emailMatcher }),
  phone: ''
});

You could put your validator in a separate file, or in the same file either above or below your component class. Something like this:

function passwordMatchValidator(frm: FormGroup) {
  return frm.controls['password'].value === 
frm.controls['confirmpassword'].value ? null : {'mismatch': true};
}

Then you would define the validator without the this keyword:

{validator: passwordMatchValidator},

You can find the complete example here: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final

edited Dec 11, 2018 at 8:12

answered Dec 11, 2018 at 7:49

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

8 Comments

Ajay Ojha Over a year ago

Just for my knowledge, is this is a right practice to put a validator on FormGroup level? As per my understanding, if there are many fields then it will create a performance issue. Because this will call every time, Please share your thoughts on alternates.

DeborahK Over a year ago

Personally, I create a new form group with only the two elements to validate and then attach the validator there. I'll update my answer with a link to the full code.

Ajay Ojha Over a year ago

Based on your updated answer: One more new question arise. Say for example: In my form there are many fields which needs to be validate based on some other FormControl Values, Then Do I need to create seperate FormGroup for cross field validation of FormControl. Don't you think the code become clumsy, if I create a seperate FormGroup? Please let me know your views.

DeborahK Over a year ago

These types of decisions are impacted by so many factors, it is hard to say at which point it makes sense just to validate the entire form's group. Build it the way it makes sense and then look at whether there are performance issues you need to work on.

Ajay Ojha Over a year ago

Now performance is not the issue based on your updated answer, but my question was: Is this is the right practice to create a separate FormGroup for every Cross-Field Validation? Don't you think the code become clumsy with your updated answer? Please share your inputs on respective questions. I am just curious about what are the other good alternatives to overcome this kind of problems.

|

Krishnadas PC · Accepted Answer · 2019-06-15 18:33:28Z

For angular 8 you can use a custom validation like this.

Import the required libraries

import { FormGroup, FormControl, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';


const passwordErrorValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const password = control.get('a');
  const repeatPassword = control.get('b');
  return password.value != repeatPassword.value ? { 'passwordError': true } : null;
};

Init form like this

 heroForm = new FormGroup({   
    'a': new FormControl(),
    'b': new FormControl()
  }, { validators: passwordErrorValidator });

And in component

 <form [formGroup]="heroForm" (ngSubmit) ="createUser(heroForm.value)">
                <input id="a" name="a" class="form-control"
                required minlength="4"
                formControlName="a">
                <input id="b" name="b" class="form-control"
                required minlength="4"
                formControlName="b" >
                 <div *ngIf="heroForm.errors?.passwordError && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
                  password mismatch
              </div>
              <input type="submit" class="btn btn-primary" value="Submit" />
            </form>

R. Viral · Accepted Answer · 2018-12-11 08:15:04Z

2

You can try this its working for me...

In your form

this.passwordForm = this.fb.group({
        newPassword: ['', [Validators.required, Validators.minLength(6)]],
        confirmNewPassword: ['', [Validators.required, Validators.minLength(6), (control => ValidationService.confirmPassword(control, this.passwordForm, 'newPassword'))]]
    });

ValidationService file

static confirmPassword(control: FormControl, group: FormGroup, matchPassword: string) {
    if (!control.value || group.controls[matchPassword].value !== null || group.controls[matchPassword].value === control.value) {
        return null;
    }
    return { 'mismatch': true }
}

answered Dec 11, 2018 at 8:15

R. Viral

3961 silver badge6 bronze badges

Comments

swagath · Accepted Answer · 2019-02-20 09:25:27Z

1

finally i found my solution

export class ConfirmPasswordValidator {
    static MatchPassword(control: AbstractControl) {
       let password = control.get('password').value;

       let confirmpassword = control.get('confirmpassword').value;

        if(password != confirmpassword) {
            control.get('confirmpassword').setErrors( {ConfirmPassword: true} );
        } else {
            return null
        }
    }
}

answered Feb 20, 2019 at 9:25

swagath

1451 gold badge3 silver badges11 bronze badges

Comments

Paresh Gami · Accepted Answer · 2018-12-11 07:33:51Z

-9

You can check form value of both like below.

<div class="error-msg" *ngIf="registerForm3.value.password !== registerForm3.value.confirmpassword">
    Passwords don't match.
</div>

answered Dec 11, 2018 at 7:33

Paresh Gami

4,7926 gold badges28 silver badges44 bronze badges

2 Comments

Devang Mistry Over a year ago

This is not good practice. it will allow you to submit form even if password and confirm password are not matched.

Paresh Gami Over a year ago

@DevangMistry Then How do like you implement that?

Collectives™ on Stack Overflow

password and confirmpassword validation in angular using reactive forms

5 Answers 5

8 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related