We're live-coding on Twitch! Join us! FREE Webinar: Should I use React or Vue?
Match Password Validation With Angular 2

Match Password Validation With Angular 2

how to create match password validation in model driven approach

Setting Up Our Application

We will setup our application with the Angular CLI. If you don’t already have the CLI installed, run

npm install -g angular-cli

and

ng init

add bootstrap to index.html

To make its beautiful form add link of bootstrap to index.html. if you don't have idea what is bootstrap it is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

simple form

<form>
  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password" 
      class="form-control" >    
  </div>
  <div class="form-group">
    <label for="confirmPassword">Conform Password</label>
    <input 
      type="password" 
      class="form-control" 
      id="confirmPassword">
  </div>
    <input type="submit" class="btn btn-primary" value="submit" >
</form>

build form with form builder

in your component import FormGroup , FormBuilder

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

build you form

form: FormGroup;
  constructor(fb: FormBuilder)
  {
    this.form = fb.group({
    // define your control in you form
      password: ["],
      confirmPassword: ['']
    })
  }

add form group and form name to control

<form [formGroup]="form">
    <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password" 
      class="form-control" 
      formControlName="password" // mast be same control in form builder
      [formGroup]="form">    
  </div>
  <div class="form-group">
    <label for="confirmPassword">Conform Password</label>
    <input 
      type="password" 
      class="form-control" 
      id="confirmPassword"
      formControlName="confirmPassword" // mast be same control in form builder
      [formGroup]="form">
  </div>
</form>

write custom validation

add new class to write custom validation

import {AbstractControl} from '@angular/forms';
export class PasswordValidation {

    static MatchPassword(AC: AbstractControl) {
       let password = AC.get('password').value; // to get value in input tag
       let confirmPassword = AC.get('confirmPassword').value; // to get value in input tag
        if(password != confirmPassword) {
            console.log('false');
            AC.get('confirmPassword').setErrors( {MatchPassword: true} )
        } else {
            console.log('true');
            return null
        }
    }
}

add validation to form builder

first we need import class in component

import { PasswordValidation } from './password-validation';

update formBuilder

constructor(fb: FormBuilder)
  {
    this.form = fb.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, {
      validator: PasswordValidation.MatchPassword // your validation method
    })
  }

add alert div to html

  <div class="alert alert-danger"
  *ngIf="form.controls.confirmPassword.errors?.MutchPassword">Password not match</div>

add ngSubmit to form

<form [formGroup]="form" (ngSubmit)="onSubmit()"></form

add onSubmit event

onSubmit() {
    console.log(this.form);
  }

run application