Matching password validation in angular 5+


Create new directive:

import { Validators, NG_VALIDATORS, AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms";
import { Directive, Input } from "@angular/core";
import { Subscription } from "rxjs";

export function compareValidator(controlNameToCompare:string): ValidatorFn{
return (c:AbstractControl):ValidationErrors | null => {
if(c.value === null || c.value.length === 0){
return null;
}
const controlToCompare = c.root.get(controlNameToCompare);
if(controlToCompare){
const Subscription:Subscription = controlToCompare.valueChanges.subscribe(()=>{
c.updateValueAndValidity();
Subscription.unsubscribe();
})
}
return controlToCompare && controlToCompare.value !== c.value ? {'compare': true}:null;
};
}

@Directive({
selector: "[compare]",
providers: [{
provide: NG_VALIDATORS,
useExisting: compareValidatorDirective,
multi: true
}]
})
export class compareValidatorDirective implements Validators {
@Input('compare') controlNameToCompare: string;
validate(c:AbstractControl):ValidationErrors | null {
return compareValidator(this.controlNameToCompare)(c);
}
}


Now call the directive in Component.ts file


Note: you need to import directive first then compareValidator() function will work.


confirmPass: new FormControl("", [Validators.required, compareValidator('Password')]),






Similar like : password match validation in angular 2,password match validation in angular 4,password match validation in angular 5,password match validation in angular 6,password match validation in angular 7,email match validation in angular 2,email match validation in angular 4,email match validation in angular 5,email match validation in angular 6,email match validation in angular 7,