Home » Confirm password validation in Angular 6|7|8|9

Confirm password validation in Angular 6|7|8|9

Today, We want to share with you Confirm password validation in Angular 6|7|8|9.In this post we will show you password and confirm password validation in angular 7 reactive form, hear for password and confirm password validation in angular 8 we will give you demo and example for implement.In this post, we will learn about Custom Validator on reactive form for password and confirm password matching getting undefined parameters into Angular 6,7,8,9 with an example.

Confirm password validation in Angular 6|7|8|9

There are the Following The simple About Angular Validation Password and Confirm Password Full Information With Example and source code.

Read Also:  jQuery Modal Popup Window Dialog Box

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

Angular Validation Password and Confirm Password

src/app/app.component.html

<div class="bdy-cart container dsp">
    <h1>Angular Validation Password and Confirm Password - pakainfo.com</h1>
       
    <form [formGroup]="form" (ngSubmit)="submit()">
           
        <div class="corona form-group lg10">
            <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="corona form-group lg10">
            <label for="double_check_pass">Confirm Password</label>
            <input 
                formControlName="double_check_pass"
                id="double_check_pass" 
                type="password" 
                class="form-control">
            <div *ngIf="f.double_check_pass.touched && f.double_check_pass.invalid" class="alert alert-danger">
                <div *ngIf="f.double_check_pass.errors.required">Password is required.</div>
                <div *ngIf="f.double_check_pass.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]],
      double_check_pass: ['', [Validators.required]]
    }, { 
      validator: ConfirmedValidator('password', 'double_check_pass')
    })
  }
    
  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:  laravel clear cache using Terminal/Command Prompt

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 reactive form.
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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Check If mail() function is enable
  2. Read Also:  Add custom text to image in Laravel with Example
  3. Read Also:  Laravel Define Global constants Config variables value
  4. Read Also:  AJAX Pagination with Laravel Example From Scratch
  5. Read Also:  Jquery Restrict only 10 numbers input in textbox
  6. Read Also:  jQuery Functions Not Working after PostBack in Asp.Net
  7. Read Also:  Password Matching using Angular validation
  8. Read Also:  AngularJS Confirm Password Validation Example
  9. Read Also:  Split Laravel Routes into Multiple Files Example
  10. Read Also:  Laravel 6 csrf tokens in ajax calls

Leave a Comment

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