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

Contents

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.

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



    Angular Validation Password and Confirm Password - Pakainfo.com.com
       
    
           
        
            Password
            
            
                Password is required.
            
        
  
        
            Confirm Password
            
            
                Password is required.
                Password and Confirm Password must be match.

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 :

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.

Password Matching using Angular validation