CODEWITHSUNDEEP
angularformsangular-reactive-formsreset-password
Dorijan Golja
Dorijan Golja

Reputation: 153

Confirm password validation in angular

I have a reset-password form with 2 input fields:

  1. New Password
  2. New Password (confirmation)

I had to create a validation where "New Password (confirmation) needed to match "New Password" and I made it. When you type in a wrong password in "New Password (confirmation) field, it gives an error and wont let you submit the form until it matches the password in field "New Password".But if I go back and change "New Password" field, "New Password (confirmation) field shows it like they still match even though they arent anymore...So my question is: how can i fix this issue?

Any advice is appreciated

ts file

import { AbstractControl, FormBuilder, FormControl, Validators } from '@angular/forms';
import { AppConfig } from 'src/app/_common/configs/app.config';
import { Component } from '@angular/core';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.scss'],
})
export class ResetPasswordComponent {
  passwordsMatching = false;
  isConfirmPasswordDirty = false;
  confirmPasswordClass = 'form-control';
  appConfig = AppConfig;
  newPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern('^((?!.*[s])(?=.*[A-Z])(?=.*d).{8,99})'),
  ]);
  confirmPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern('^((?!.*[s])(?=.*[A-Z])(?=.*d).{8,99})'),
  ]);

  resetPasswordForm = this.formBuilder.group({
    newPassword: this.newPassword,
    confirmPassword: this.confirmPassword,
  });

  constructor(private formBuilder: FormBuilder) {}

  onSubmit(): void {
    if (!this.resetPasswordForm?.valid) {
      return;
    }
  }

  checkPasswords(pw: string, cpw: string) {
    this.isConfirmPasswordDirty = true;
    if (pw == cpw) {
      this.passwordsMatching = true;
      this.confirmPasswordClass = 'form-control is-valid';
    } else {
      this.passwordsMatching = false;
      this.confirmPasswordClass = 'form-control is-invalid';
    }
  }
}

**
HTML**

<section class="h-100">
  <div class="container h-100"> 
    <div class="card reset-password-form-card">
      <div class="card-body p-5">
        <h4 class="card-title fw-bold mb-4">Reset password</h4>
        <form class="form" [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
          <div class="mb-3">
            <label for="newPassword">New password: </label>
            <input id="newPassword" type="password" 
            class="form-control" formControlName="newPassword" #pw>
            <div *ngIf="newPassword.invalid && (newPassword.dirty || newPassword.touched)"
            class="form-text text-danger">
            <div *ngIf="newPassword.errors?.['required']">
              Field is required
            </div>
            <div *ngIf="newPassword.errors?.['pattern']">
              Password must contain at least one number, one uppercase and a lowercase letter 
              and at least 8 characters<br>Password cannot contain whitespace
            </div>
          </div>
        </div>
        <div class="mb-3">
          <label for="confirmPassword">New password (confirmation):</label>
          <input id="confirmPassword" type="password" class="form-control"
          [ngClass]='confirmPasswordClass' formControlName="confirmPassword"
          #cpw (keyup)='checkPasswords(pw.value, cpw.value)'>
          <div *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)"
          class="form-text text-danger">
        <div *ngIf="confirmPassword.errors?.['required']">
          Field is required        
        </div>
        <div *ngIf="confirmPassword.errors?.['pattern']">
          Password must contain at least one number, one uppercase and a lowercase letter 
          and at least 8 characters<br>Password cannot contain whitespace
        </div>
        <div *ngIf='!passwordsMatching && isConfirmPasswordDirty'>
          Passwords did not match
      </div>
      </div>
    </div>
    <div class="d-flex align-items-center">
      <button [disabled]="!resetPasswordForm.valid" type="submit" class="btn btn-dark col-5 mx-auto">
        Reset password
      </button>
      <button type="button" class="btn btn-light col-5 mx-auto" appBackButton>Back</button>
    </div>
   </form>
      </div>
    </div> 
  </div>
</section>

Upvotes: 13

Views: 71994

Answers (5)

Ali Adravi
Ali Adravi

Reputation: 22833

All the above codes will make your entire form in-valid.

Here is the simplest way to do it:

Create 2 getters anywhere in the component, it can also be used in HTML for validation:

get password() { return this.frmRegister.controls["password"];}
get conPassword() { return this.frmRegister.controls["confirmPassword"];}

And then in ngOnInit:

ngOnInit() {
  this.confirmPassword.addValidators(() => {
     if (!this.confirmPassword.value) return null;

     return this.password.value === this.confirmPassword.value ? 
               null: {mismatch : true} );
   }
}

Here is the HTML if you need more info:

<input type="text" 
    formControlName="password"
    class="form-control"
    placeholder="Password">
<div class="error" *ngIf="password?.invalid && (password?.touched || password?.dirty)">
  <div *ngIf="password?.errors?.['required']">Required</div>
  <div *ngIf="password?.errors?.['minlength']">Min. 8 Character</div>
  <div *ngIf="password?.errors?.['maxlength']">Max. 30 Character</div>
</div>
            
 <input type="text"  
     formControlName="confirmPassword"
     class="form-control"
     placeholder="Confirm Password" />
   <div class="error" *ngIf="confirmPassword?.invalid && (confirmPassword?.touched || confirmPassword?.dirty)">
     <div *ngIf="confirmPassword?.errors?.['required']">Required</div>
     <div *ngIf="confirmPassword?.errors?.['mismatch']">Mismatch!</div>
 </div>

Upvotes: 0

92lexus
92lexus

Reputation: 706

Aniruddh Thakor's answer seems to be working for the most part. However there were some changes I had to make, due to my project running on a newer Angular version.

First, the formBuilder.group() function was marked as deprecated. To resolve this issue, I had to switch validator to validators, in order to use the non-deprecated function.

Then I had to adjust the return statements inside the Validator function, to meet the ValidatorFn type. The function should return either null (e.g. when there are no errors) or a ValidationError formatted in the following way: [key: string]: any.

My updated version:

ngOnInit() {
    this.resetPasswordForm = this.formBuilder.group(
      {
        password: ['', Validators.required],
        confirmPassword: ['', Validators.required]
      },
      {
        validators: this.matchValidator('password', 'confirmPassword')
      }
    );
  }

  matchValidator(controlName: string, matchingControlName: string): ValidatorFn {
    return (abstractControl: AbstractControl) => {
        const control = abstractControl.get(controlName);
        const matchingControl = abstractControl.get(matchingControlName);

        if (matchingControl!.errors && !matchingControl!.errors?.['confirmedValidator']) {
            return null;
        }

        if (control!.value !== matchingControl!.value) {
          const error = { confirmedValidator: 'Passwords do not match.' };
          matchingControl!.setErrors(error);
          return error;
        } else {
          matchingControl!.setErrors(null);
          return null;
        }
    }
  }

Upvotes: 15

ritu_o0o
ritu_o0o

Reputation: 69

I know it is already answered but I found another trick.

you can add *ngIf directive and check the property of a form. see sample below

<input class="form-control form-control-lg shadow-none" type="password"
       placeholder="Confirm password" minlength="8" formControlName="confirmPassword">
        <span class="text-danger" *ngIf="newUserForm.get('password').valid && newUserForm.get('confirmPassword').dirty && (newUserForm.get('password').value !== newUserForm.get('confirmPassword').value)">
              Password and Confirm Password must match
        </span>

Upvotes: 0

Mikkel Christensen
Mikkel Christensen

Reputation: 2827

You can add a validator directly to your FormGroup which compares the value of your two form controls.

Form Group

First we create a form group which handles validation on each individual input field:

passwordForm: FormGroup;

constructor(fb: FormBuilder) {
  this.passwordForm = fb.group({
    // any validators you may need to check the formatting of your password
    password: fb.control('', [Validators.required]) 
    check: fb.control('', [Validators.required])
  });
}

Validating the Form Group itself

Now we just need to validate that our two controls match, this can be done by adding another validator directly to our FormGroup

I made a function which constructs a new validator, comparing the values of each:

function createCompareValidator(controlOne: AbstractControl, controlTwo: AbstractControl) {
    return () => {
    if (control.value !== controlTwo.value)
      return { match_error: 'Value does not match' };
    return null;
  };

}

combining them

In our constructor, after creating your FormGroup we now add the new validator to the FormGroup itself.

// continued inside constructor()
this.passwordForm.addValidator(
 createCompareValidator(
   this.passwordForm.get('password'),
   this.passwordForm.get('check')
 )
);

That's it, now your FormGroup will automatically check for errors every time the values between password and check do not match:

See Stackblitz

Upvotes: 3

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

I have done some changes on your code so please check

ts file

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  passwordsMatching = false;
  isConfirmPasswordDirty = false;
  confirmPasswordClass = 'form-control';
  newPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern(
      /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*#?&^_-]).{8,}/
    ),
  ]);
  confirmPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern(
      /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*#?&^_-]).{8,}/
    ),
  ]);

  resetPasswordForm = this.formBuilder.group(
    {
      newPassword: this.newPassword,
      confirmPassword: this.confirmPassword,
    },
    {
      validator: this.ConfirmedValidator('newPassword', 'confirmPassword'),
    }
  );

  constructor(private formBuilder: FormBuilder) {}

  onSubmit(): void {
    console.log(this.resetPasswordForm);
    if (!this.resetPasswordForm?.valid) {
      return;
    }
  }

  ConfirmedValidator(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      const control = formGroup.controls[controlName];
      const matchingControl = formGroup.controls[matchingControlName];
      if (
        matchingControl.errors &&
        !matchingControl.errors.confirmedValidator
      ) {
        return;
      }
      if (control.value !== matchingControl.value) {
        matchingControl.setErrors({ confirmedValidator: true });
      } else {
        matchingControl.setErrors(null);
      }
    };
  }
}

HTML

<section class="h-100">
  <div class="container h-100">
    <div class="card reset-password-form-card">
      <div class="card-body p-5">
        <h4 class="card-title fw-bold mb-4">Reset password</h4>
        <form
          class="form"
          [formGroup]="resetPasswordForm"
          (ngSubmit)="onSubmit()"
        >
          <div class="mb-3">
            <label for="newPassword">New password: </label>
            <input
              id="newPassword"
              type="password"
              class="form-control"
              formControlName="newPassword"
              #pw
            />
            <div
              *ngIf="
                newPassword.invalid &&
                (newPassword.dirty || newPassword.touched)
              "
              class="form-text text-danger"
            >
              <div *ngIf="newPassword.errors?.['required']">
                Field is required
              </div>
              <div *ngIf="newPassword.errors?.['pattern']">
                Password must contain at least one number, one uppercase and a
                lowercase letter and at least 8 characters<br />Password cannot
                contain whitespace
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label for="confirmPassword">New password (confirmation):</label>
            <input
              id="confirmPassword"
              type="password"
              class="form-control"
              [ngClass]="confirmPasswordClass"
              formControlName="confirmPassword"
              #cpw
            />
            <div
              *ngIf="
                confirmPassword.invalid &&
                (confirmPassword.dirty || confirmPassword.touched)
              "
              class="form-text text-danger"
            >
              <div *ngIf="confirmPassword.errors?.['required']">
                Field is required
              </div>
              <div *ngIf="confirmPassword.errors?.['pattern']">
                Password must contain at least one number, one uppercase and a
                lowercase letter and at least 8 characters<br />Password cannot
                contain whitespace
              </div>
              <div *ngIf="confirmPassword.errors?.['confirmedValidator']">
                Passwords did not match
              </div>
            </div>
          </div>
          <div class="d-flex align-items-center">
            <button
              type="submit"
              [disabled]="resetPasswordForm.invalid"
              class="btn btn-dark col-5 mx-auto"
            >
              Reset password
            </button>
            <button
              type="button"
              class="btn btn-light col-5 mx-auto"
              appBackButton
            >
              Back
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

And here is the working demo of it:- https://stackblitz.com/edit/angular-ivy-pjdyva?file=src%2Fapp%2Fapp.component.ts

Upvotes: 16

Related Questions