Hello Devs, 

In this tutorial, we will learn Password Confirm Password Validation Angular

In this section, we will do implement a angular password match validation. We will use password and confirm password validation in angular 6, angular 7, angular 8 and angular 9 application.

Follow this step by step guide below



Example:


src/app/app.component.html

<div class="container">

    <h1>Angular Validation Password and Confirm Password - rathorji.in</h1>

       

    <form [formGroup]="form" (ngSubmit)="submit()">

           

        <div class="form-group">

            <label for="password">Password</label>

            <input 

                formControlName="password"

                id="password" 

                type="password" 

                class="form-control">

            <div *ngIf="f.password.touched && f.password.invalid" class="alert alert-danger">

                <div *ngIf="f.password.errors.required">Password is required.</div>

            </div>

        </div>

  

        <div class="form-group">

            <label for="confirm_password">Confirm Password</label>

            <input 

                formControlName="confirm_password"

                id="confirm_password" 

                type="password" 

                class="form-control">

            <div *ngIf="f.confirm_password.touched && f.confirm_password.invalid" class="alert alert-danger">

                <div *ngIf="f.confirm_password.errors.required">Password is required.</div>

                <div *ngIf="f.confirm_password.errors.confirmedValidator">Password and Confirm Password must be match.</div>

            </div>

        </div>

        

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

    </form>

</div>



src/app/app.component.ts

import { Component } from '@angular/core';

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

  

import { ConfirmedValidator } from './confirmed.validator';

    

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  form: FormGroup = new FormGroup({});

  

  constructor(private fb: FormBuilder) {

  

    this.form = fb.group({

      password: ['', [Validators.required]],

      confirm_password: ['', [Validators.required]]

    }, { 

      validator: ConfirmedValidator('password', 'confirm_password')

    })

  }

    

  get f(){

    return this.form.controls;

  }

   

  submit(){

    console.log(this.form.value);

  }

   

}



src/app/confirmed.validator.ts

import { FormGroup } from '@angular/forms';

    

export function 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);

        }

    }

}


May this example help you.