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

https://stackoverflow.com/questions/51605737/confirm-password-validation-in-angular-6 — 鸿则_, Oct 24 '19 at 05:32
@鸿则_ thnks. In there `checkPasswords(group: FormGroup)` is in the same typescript file. Only can check controllers with name password, and confirmPass. But i need to use confirm any two values. — dasunse, Oct 24 '19 at 05:45

score 15 · Accepted Answer · edited Jan 28 '20 at 22:50

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.

Orleando Dassi · Answer 2 · 2019-10-24T06:21:37.557

You don't forcibly need to pass it that way as the SDK does allow you to have what you want using the parent field of the AbstractControl giving you the FormGroup reference, here is how:

export const RetypeConfirmValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {

    if (!control.parent || !control) {
        return null;
    }

    const newPassword = control.parent.get('newPassword');          // The new password
    const confirmpassword = control.parent.get('confirmpassword');  // The retyped password

    if (!newPassword || !confirmpassword){
        return null;
    }

    if (confirmpassword.value === ''){
        return null;
    }

    if (newPassword.value === confirmpassword.value){
        return null;
    }

    return { 'mismatch': true };
};

dasunse · Answer 3 · 2019-10-24T08:15:49.550

This way worked for me

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

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

In your typescript file

this.passwordChangeForm = this.fb.group({
      newPassword: ["", [Validators.required, Validators.pattern(RegEx.STRONG_PASSWORD)]],
      confirmpassword: ["", [Validators.required, RetypeConfirm('newPassword')]],
    });

How to pass that value : RetypeConfirm('newPassword')

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

3 Answers3