CODEWITHSUNDEEP
angular
dasunse
dasunse

Reputation: 3099

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

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

Upvotes: 8

Views: 8157

Answers (3)

varman
varman

Reputation: 8894

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.

Upvotes: 18

dasunse
dasunse

Reputation: 3099

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')

Upvotes: 0

Orl&#233;ando Dassi
Orl&#233;ando Dassi

Reputation: 466

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 };
};

Upvotes: 3

Related Questions