I am struggling to implement custom validation for checking if passwords match. Unfortunately, the custom validator is not being triggered. I apologize for not being able to provide a Plunkr example.
//Below is the code snippet for the register component (including imports)
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { confirmPass } from '../confirm-password.validator';
register_form: FormGroup;
constructor(
private _fb: FormBuilder
) {
this.register_form = this._fb.group({
'name': ['', Validators.required],
'surname': ['', Validators.required],
'email': ['', [Validators.required, Validators.pattern('/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/')]],
'password': ['', [Validators.required, Validators.minLength(8)]],
'confirm_password': ['', [Validators.required, confirmPass]],
'phone': ['', Validators.required],
'birth_date': ['', Validators.required]
},)
}
//validator function
import { AbstractControl, ValidatorFn } from "@angular/forms";
export function confirmPass(controller): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
console.log(controller.root.controls['password']);
if (controller.value == controller.root.get('password').value) {
return null;
}
return { 'error': { value: controller.value } };
};
}