Reactive Form Confirm password and Confirm Email Validator angular 4

Question

I need to check whether password and confirm password fields have same value using reactive form angular 4+. I did see a lot of answers on the same here,Angular 4 form validating for repeat password ,Comparing fields in validator with angular 4, but none seemed to work for me.

Facing issue , how to combine confirm Email and confirm password validator in reactive approach.

Is worked fine either confirm Email or Confirm Password.

this.addEmpForm = new FormGroup({
    'name': new FormControl(null, Validators.required),
    'email': new FormControl(null, [Validators.required, Validators.email]),
    'cemail': new FormControl(null, [Validators.required, Validators.email]),
    'password': new FormControl(null, Validators.required),
    'cpassword': new FormControl(null, Validators.required)
}, this.pwdMatchValidator);

emailMatchValidator(frm: FormGroup) {
  return frm.get('password').value === frm.get('cpassword').value
    ? null : { 'mismatch': true };
}
    
pwdMatchValidator(frm: FormGroup) {
  return frm.get('password').value === frm.get('cpassword').value
    ? null : { 'mismatch': true };
}

HTML

<span class="help-block"
  *ngIf="addEmpForm.get('cemail').touched && cemail?.errors
  || addEmpForm.get('cemail').touched
  && addEmpForm.errors?.mismatch">
    Email doesn't match
</span> 

Heyer

Have a look at this: toddmotto.com/reactive-formgroup-validation-angular-2 – Mustard

Answer 1

COMPONENT TS

password: [
    '',
    [Validators.required, Validators.maxLength(50)]
],
confirmPassword: [
    '',
    [
        Validators.required,
        PasswordValidator('password'),
        Validators.maxLength(50)
    ]
],
emailAddress: [
    '',
    [Validators.required, Validators.email, Validators.maxLength(50)]
],
confirmEmailAddress: [
    '',
    [
        Validators.required,
        Validators.email,
        EmailValidator('emailAddress'),
        Validators.maxLength(50)
    ]
]

EMAIL VALIDATOR

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

export function EmailValidator(confirmEmailInput: string) {
  let confirmEmailControl: FormControl;
  let emailControl: FormControl;
  
  return (control: FormControl) => {
    if (!control.parent) {
      return null;
    }
  
    if (!confirmEmailControl) {
      confirmEmailControl = control;
      emailControl = control.parent.get(confirmEmailInput) as FormControl;
      emailControl.valueChanges.subscribe(() => {
        confirmEmailControl.updateValueAndValidity();
      });
    }

    if (emailControl.value.toLocaleLowerCase() !==
        confirmEmailControl.value.toLocaleLowerCase()
    ) {
      return { notMatch: true };
    }

    return null;
  };
}

PASSWORD VALIDATOR

import { FormControl } from '@angular/forms';
   
export function PasswordValidator(confirmPasswordInput: string) {
  let confirmPasswordControl: FormControl;
  let passwordControl: FormControl;
  
  return (control: FormControl) => {
    if (!control.parent) {
      return null;
    }
  
    if (!confirmPasswordControl) {
      confirmPasswordControl = control;
      passwordControl = control.parent.get(confirmPasswordInput) as FormControl;
      passwordControl.valueChanges.subscribe(() => {
        confirmPasswordControl.updateValueAndValidity();
      });
    }

    if (passwordControl.value !== confirmPasswordControl.value) {
      return { notMatch: true };
    }

    return null;
  };
}

You will have to import your validator into your component.ts file

Extinct

I need to combine both confirm password and Email in one Form – Heyer

this will do it – Extinct