How to pass Form Group control value to a Custom Validator which uses in the same Form Group?

Question

I have a custom validator to check retype confirm

import { AbstractControl } from '@angular/forms';

export function RetypeConfirm(confirmpassword: string) {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (control.value !== confirmpassword) {
             return { 'mismatch': true };
        }
        return null;
    };
}

My typescript file

import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { RetypeConfirm } from 'app/validators/retype-confirm.validator';

passwordChangeForm: FormGroup;
constructor(private fb: FormBuilder){
     this.passwordChangeForm = this.fb.group({
         newPassword: ["", [Validators.required, Validators.pattern(RegEx.STRONG_PASSWORD)]],
         confirmpassword: ["", [Validators.required, RetypeConfirm(***I want to pass passwordChangeForm.controls['newPassword'].value  here****  )]]
     });
}

I need to pass this.passwordChangeForm.controls['newPassword'].value to RetypeConfirm custom validator

Answer 1

The function get the password field and compare with confirm password

function RetypeConfirm(newpassword: string): ValidatorFn {
    return (control: FormControl) => {

        if (!control || !control.parent) {
            return null;
        }
        return control.parent.get(newpassword).value === control.value ? null : { mismatch: true };
    };
}

And you can directly pass the value of password from group

this.signUpForm = this.fb.group({
    newpassword: ['', [Validators.required]],
    confirmPassword: ['', [
        Validators.required,
        RetypeConfirm('newpassword')
  ]]
});

And the html,

<form [formGroup]="signUpForm">
    <label>New Password</label>
    <input  formControlName="newpassword" />
    <br>
    <label> Confirm Password</label>
    <input name="confirmPassword"  formControlName="confirmPassword"/>

    <span *ngIf=" signUpForm.get('confirmPassword').errors?.mismatch">Password Confirmation must match password</span>

</form>

Working Stackblitz.