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:
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Angular Material Grid Layout Example
- Best websites to learn angular
- Template Reference Variables(#var) in Angular
- How to get names and values of enum in typescript
- How to convert string to number in javascript or typescript
If you like this post, please share it with your friends.