Angular Validation Password and Confirm Password

Angular Validation Password and Confirm Password

In this post we will give you information about Angular Validation Password and Confirm Password. Hear we will give you detail about Angular Validation Password and Confirm PasswordAnd how to use it also give you demo for it if it is necessary.

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 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 >

<h1>Angular Validation Password and Confirm Password - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div >

<label for="password">Password</label>

<input

formControlName="password"

id="password"

type="password"

>

<div *ngIf="f.password.touched && f.password.invalid" >

<div *ngIf="f.password.errors.required">Password is required.</div>

</div>

</div>

<div >

<label for="confirm_password">Confirm Password</label>

<input

formControlName="confirm_password"

id="confirm_password"

type="password"

>

<div *ngIf="f.confirm_password.touched && f.confirm_password.invalid" >

<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 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

Also see:Angular Validation for URL Example

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…

Hope this code and post will helped you for implement Angular Validation Password and Confirm Password. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

8  +  1  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US