Password Matching using Angular validation

Today, We want to share with you Password Matching using Angular validation.In this post we will show you password and confirm password validation in angular 6 reactive form, hear for Password Confirm Password Validation Angular we will give you demo and example for implement.In this post, we will learn about password and confirm password validation in angular 8 with an example.

Password Matching using Angular validation

There are the Following The simple About password and confirm password validation in angular 6 stackblitz Full Information With Example and source code.

As I will cover this Post with live Working example to develop password and confirm password validation in angular reactive form, so the angular 6 password validation pattern is used for this example is following below.

Read Also:  Image uploader in Angular with Preview & Progress

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

Keywords : password and confirm password validation in angular reactive form, password and confirm password validation in angular 8, password and confirm password validation in angular reactive form, angular password match validation

Password Confirm Password Validation Angular

src/app/app.component.html

<div class="wrap jdk-form container">
    <h1>Angular Validation Password and Confirm Password - Pakainfo.com.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 dsp">
            <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 dsp">
            <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-success" 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);
        }
    }
}

Web Programming Tutorials Example with Demo

Read :

Read Also:  Angular 6 applications - Insert, Fetch , Edit - update , Delete Operations

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about password and confirm password validation in angular.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.