Hello Devs,
In this tutorial, we will learn Password Confirm Password Validation Angular
In this section, we will do implement a angular password match validation. We will use password and confirm password validation in angular 6, angular 7, angular 8 and angular 9 application.
Follow this step by step guide below
Example:
src/app/app.component.html
<div class="container">
<h1>Angular Validation Password and Confirm Password - rathorji.in</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);
}
}
}May this example help you.