Validate equal directive for Angular

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

Online Demo & Usage Guide

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

email

angular

directive

tempate-driven forms

form

validation

equality

fields

match

matching