python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 Form Password Match Validator

Angular 4 Form Password and Conform Password Match Validator

How to Validate Password and Confirm Password in Angular 4?

How to Validate Form in Angular 4?
This custom validator is used for Password and Conform Password in Angular 4 which allows us to have fields that must be equal to some other field’s i.e.
1.     Password field
2.     Conform Password field

This custom validator is very useful for password confirmation validation, validate card etc.

Example 1 –
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

export class AppComponent implements OnInit {
    userForm: FormGroup;
    password = 'password';

    constructor(private fBuilder: FormBuilder) {
        this.userForm ={
            name: fBuilder.control(null, Validators.required),
            age: fBuilder.control(null, [Validators.required, Validators.minLength(2), Validators.maxLength(2)]),
            email: fBuilder.control(null, [Validators.required,]),
            password: fBuilder.control(null, Validators.required),
            repeatPassword: fBuilder.control(null, [Validators.required, matchValidator(this.password)])

    onSubmit(): void {

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

export function matchValidator(fieldName: string) {
    let fcfirst: FormControl;
    let fcSecond: FormControl;

    return function matchValidator(control: FormControl) {

        if (!control.parent) {
            return null;

        if (!fcfirst) {
            //INITIALIZING FormControl first
            fcfirst = control;
            fcSecond = control.parent.get(fieldName) as FormControl;

            //FormControl Second
            if (!fcSecond) {
                throw new Error('matchValidator(): Second control is not found in the parent group!');

            fcSecond.valueChanges.subscribe(() => {

        if (!fcSecond) {
            return null;

        if (fcSecond.value !== fcfirst.value) {
            return {
                matchOther: true

        return null;

Example 2 –
import { Directive, forwardRef, Attribute } from '@angular/core';
import { NG_VALIDATORS, Validator, Validators, AbstractControl, ValidatorFn } from '@angular/forms';

    selector: '[Equalvalidate][formControlName],[formControl],[ngModel]',
    providers: [
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => EqualValidator),
            multi: true

export class EqualValidator implements Validator {

    constructor(@Attribute('Equalvalidate') public Equalvalidate: string) { }

    validate(abControl: AbstractControl): { [key: string]: any } {
        // Get self value.
        let val = abControl.value;

        // Get control value.
        let cValue = abControl.root.get(this.Equalvalidate);

        // value not equal
        if (cValue && val !== cValue.value) return {
            Equalvalidate: false

        return null;

<div class="form-group">
    <label for="Password">Password</label>
    <input type="password" class="form-control" id="password" required [(ngModel)]="model.password" name="password" #password="ngModel">
    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
         Password is required
<div class="form-group">
    <label for="ConfirmPassword">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" required Equalvalidate="password" [(ngModel)]="model.confirmPassword" name="confirmPassword"  #confirmPassword="ngModel">
    <div [hidden]="confirmPassword.valid || confirmPassword.pristine" class="alert alert-danger">
        Password mismatch

Example 3 –
let passwordMatchValidator = function(fg: FormGroup) {
    return fg.get('password').value === fg.get('confirmPassword').value ? null : { 'mismatch': true };

const form = new FormGroup({
    password: new FormControl('', Validators.minLength(6), Validators.maxLength(30)),
    passwordConfirm: new FormControl('', Validators.minLength(6), Validators.maxLength(30)),
}, passwordMatchValidator);

Result –

References –

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions