Step by Step Creating Password Match Validator in Angular | Cross Controls Validations in Angular

Angular provides a powerful feature called cross control validations that allow us to validate multiple form fields against each other. In this article, we will go through the step by step process of creating a password match validator in Angular.

Step 1: Create a new Angular project

First, we need to create a new Angular project using the Angular CLI. Open a terminal and run the following command:

ng new password-match-validator

This will create a new Angular project with the name ‘password-match-validator’.

Step 2: Create a new component for the password match validator

Next, we need to create a new component for the password match validator. In the terminal, run the following command:

ng generate component password-match-validator

This will create a new component with the name ‘password-match-validator’.

Step 3: Implement the password match validator logic

Open the HTML file of the ‘password-match-validator’ component and add the following code:

        <form [formGroup]="passwordForm">
            <input type="password" formControlName="password" placeholder="Enter password">
            <input type="password" formControlName="confirmPassword" placeholder="Confirm password">
        </form>
    

Next, open the TypeScript file of the ‘password-match-validator’ component and add the following code:

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

        @Component({
            selector: 'app-password-match-validator',
            templateUrl: './password-match-validator.component.html',
            styleUrls: ['./password-match-validator.component.css']
        })
        export class PasswordMatchValidatorComponent implements OnInit {
            passwordForm: FormGroup;

            constructor(private formBuilder: FormBuilder) { }

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

            passwordMatchValidator(formGroup: FormGroup) {
                return formGroup.get('password').value === formGroup.get('confirmPassword').value ? null : { mismatch: true };
            }
        }
    

Step 4: Use the password match validator in a form

Finally, we can use the password match validator in a form by referencing the ‘passwordForm’ in the HTML template of another component:

        <app-password-match-validator></app-password-match-validator>
        <div *ngIf="passwordForm.hasError('mismatch')">
            Passwords do not match
        </div>
    

That’s it! Now you have successfully created a password match validator in Angular using cross control validations. You can now use this validator in any form to ensure that the password and confirm password fields match.