README

Validate equal directive for Angular

An Angular directive to validate equality of two template-driven form fields

Installation and Usage

Step #1:

install a compatible version of "ng-validate-equal" package

Angular version	"ng-validate-equal" version	Installation command
v12.x.x	v6.x.x	npm i ng-validate-equal
v11.x.x	v5.x.x	npm i ng-validate-equal@5
v10.x.x	v4.x.x	npm i ng-validate-equal@4
v9.x.x	v3.x.x	npm i ng-validate-equal@3

Step #2:

import ValidateEqualModule from 'ng-validate-equal' in your module.ts and add it to the NgModule imports' array

import { ValidateEqualModule } from  'ng-validate-equal';

@NgModule({
    declarations: [],
    imports: [
        ValidateEqualModule
    ],
    providers: [],
})

Step #3:

Make sure you surround your field and its confirmation/retype field in a <form> </form> tag
Give your primary field a name
Use the directive ngValidateEqual on the secondary field and pass the primary field's name to the directive like this ngValidateEqual="primaryFieldName"
Look for 'notEqual' error in the confirmation field's errors array like this modelConfirmPassword.hasError('notEqual')

Example: app.component.html

<form>

    <!-- Password field -->
    <label> Password </label>
 
    <input  type="password" name="passwordFieldName" placeholder="Password"
        #modelPassword="ngModel" [(ngModel)]="model.password">

    <!-- Confirm password field -->
    <label> Confirm Password </label>

    <input type="password" ngValidateEqual="passwordFieldName"  
        name="confirmPasswordFieldName" #modelConfirmPassword="ngModel"
        [(ngModel)]="model.confirmPassword" placeholder="Confirm Password">

    <!-- Error message -->
    <div *ngIf="(modelConfirmPassword.dirty || modelConfirmPassword.touched) &&
        modelConfirmPassword.invalid">

        <p style="color:red" *ngIf="modelConfirmPassword.hasError('notEqual') &&
            modelPassword.valid">
            Passwords Don't Match
        </p>
    </div>

</form>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export  class  AppComponent {

    model = {
        password: null,
        confirmPassword: null
    };

}

CHEERS :)

Love our package? Give our repo a star >

Keywords

validate

equal

confirm

password

repeat

retype

angular

directive

tempate-driven forms

form

validation

equality

fields

match

matching

Usage no npm install needed!