Today, i will let you know example of password and confirm password validation in angular reactive form. you will learn password and confirm password validation in angular 8. we will help you to give example of password and confirm password validation in angular reactive form. In this article, we will implement a angular password match validation. Let's see bellow example password and confirm password validation in angular reactive form.
You can use password and confirm password validation in angular 6, angular 7, angular 8 and angular 9 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 - HDTuto.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...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example