Angular Validation Password and Confirm Password
I am going to show you example of password and confirm password validation in angular reactive form. this example will help you angular password match validation. you can see password and confirm password validation in angular reactive form. it's simple example of password and confirm password validation in angular 8.
You can use password and confirm password validation in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15 and angular 16 application.
I will give you full example of how to add match password validation in angular application. we will add two textbox with password and confirm password in angular using reactive form. we will create our custom ConfirmedValidator class for checking match validation. you can also see bellow preview for validation.
Example:
src/app/app.component.html
<div class="container">
<h1>Angular Validation Password and Confirm Password - ItSolutionStuff.com</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);
}
}
}
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- 10 Digit Mobile Number Validation in Angular
- Allow Only Numbers in Textbox using Angular
- Angular Checkbox Example | Angular 9/8 Checkbox Tutorial
- Angular Radio Button On Change Event Example
- How to add on Change Event on Dropdown in Angular?
- Angular Form Validation no Whitespace Allowed Example
- Reactive Form with Validation in Angular 8
- How to Create Custom Pipe in Angular 9/8?