Match Password Validation in Angular Reactive Forms

Table of Contents

Angular Custom Validator To Match Password and Confirm Password in Angular Reactive Forms

In this blog post, we’ll learn how to create a custom validator to match password and confirm password.

In Angular, there is no built-in validator for matching password and confirm password.

So we are going to create new custom validator in angular to match password and confirm password. Read more about Custom validators in angular

Reactive Form Setup

Now, We’ll create registration form as following.

As we are creating a validator for reactive form, we should have reactive form setup.

If you are new to angular reactive forms, I would recommend reading this article: Angular Reactive Forms

To get the better understanding we are going to create one reactive form page and we’ll apply custom validators to it.

We’ll be using the following files throughout this example:

registration-form.component.html
registration-form.component.ts

To user reactive form, we need to import ReactiveFormsModule.
app.module.ts will look as follows:


import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    //..other imports
    ReactiveFormsModule
    ]
})
export class AppModule { }

Generate a form using Angular form builder

The registration-form.component.ts will look as follows, It doesn’t contain any custom validators right now, but we’ll add it later.


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, } from '@angular/forms'; 

@Component({
  selector: 'app-registration-form',
  templateUrl: './app-registration-form.component.html',
  styleUrls: ['./app-registration-form.component.scss']
})
export class RegistrationFormComponent implements OnInit {
  registerForm: FormGroup;
  submitted: boolean = false;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.registerForm = this.fb.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
      confirmPasswod: ['', Validators.required]
    });
  }
  onSubmit() { this.submitted = true; }
}

Assign formGroup and formControlName to control

Now the template file registration-form.component.html will look as follows


<form [formgroup]="registerForm" (ngsubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Email</label>
    <input type="text" class="form-control" formcontrolname="email">
    <div *ngif="submitted && registerForm.get('email').errors" class="alert alert-danger">
      <div *ngif="registerForm.get('email').errors.required">
        Email is required
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="name">Password</label>
    <input type="password" class="form-control" formcontrolname="password">
    <div *ngif="submitted && registerForm.get('password').errors" class="alert alert-danger">
      <div *ngif="registerForm.get('password').errors.required">
        Password is required
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="name">Confirm Password</label>
    <input type="password" class="form-control" formcontrolname="confirmPassword">
    <div *ngif="submitted && registerForm.get('confirmPassword').errors" class="alert alert-danger">
      <div *ngif="registerForm.get('confirmPassword').errors.required">
        Confirm Password is required
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

Create Custom Validator

Now create a new file called confirm-password.validator.ts and the following code.


import { AbstractControl, FormGroup } from "@angular/forms";
export function ConfirmPasswordValidator(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
      let control = formGroup.controls[controlName];
      let matchingControl = formGroup.controls[matchingControlName]
      if (
        matchingControl.errors &&
        !matchingControl.errors.confirmPasswordValidator
      ) {
        return;
      }
      if (control.value !== matchingControl.value) {
        matchingControl.setErrors({ confirmPasswordValidator: true });
      } else {
        matchingControl.setErrors(null);
      }
    };
  }

The above code is to validate password and confirm password.

As you can see that we got the value of password and confirm password and compared both values.

If both values are not the same, that means didn’t match the password, so we’ll set error using angular setErrors function. and if both are same then we’ll return null.

Now we’ll this validator to reactive form.

Adding Validator to Reactive Form

Now we’ll import Custom Validator(confirm-password.validator.ts) to registration-form.component.ts and will update the form as follows:


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ConfirmPasswordValidator } from './confirm-password.validator'; 

@Component({
  selector: 'app-registration-form',
  templateUrl: './app-registration-form.component.html',
  styleUrls: ['./app-registration-form.component.scss']
})
export class RegistrationFormComponent implements OnInit {
 registerForm: FormGroup;
 submitted: boolean = false;

 constructor(private fb: FormBuilder) {}

 ngOnInit() {
    this.registerForm = this.fb.group(
      {
        email: ["",Validators.required],
        password: ["",Validators.required],
        confirmPassword: ["",Validators.required]
      },
      {
        validator: ConfirmPasswordValidator("password", "confirmPassword")
      }
    );
  }

 onSubmit() {
    this.submitted = true;
  }

}

Now we’ll update template file as following to show the error if password didn’t match.


<form [formgroup]="registerForm" (ngsubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Email</label>
    <input type="text" class="form-control" formcontrolname="email">
    <div *ngif="submitted && registerForm.get('email').errors" class="alert alert-danger">
      <div *ngif="registerForm.get('email').errors.required">
        Email is required
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="name">Password</label>
    <input type="password" class="form-control" formcontrolname="password">
    <div *ngif="submitted && registerForm.get('password').errors" class="alert alert-danger">
      <div *ngif="registerForm.get('password').errors.required">
        Password is required
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="name">Confirm Password</label>
    <input type="password" class="form-control" formcontrolname="confirmPassword">
    <div *ngif="submitted && registerForm.get('confirmPassword').errors" class="alert alert-danger">
      <div *ngif="registerForm.get('confirmPassword').errors.required">
        Confirm Password is required
      </div>

      <div *ngif="registerForm.get('confirmPassword').errors.confirmPasswordValidator">
        Passsword and Confirm Password didn't match.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

Output

Here’s a link for live example.

Thanks for reading the article.

Also, read:

If you like this post, please share it with your friends.