Angular 4 custom form validation not triggering

Question

I want to create custom validation to validate if passwords are same, but the problem is custom validator not triggering. Sorry, I am not able to share plunkr.

//Here is the register component (and 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 } };
    };
}

Not sure yet, but one piece of advice use === instead of == in validator check. Comparing to my min/max validators I also just would be doing equivalent of return { 'confirmPass' : {controller.value} } And in main code does it need to be confirmPass() in the Validators array? — JGFMK, Aug 12 '17 at 10:13
Thanks for '===' thing and no it's not needed to use "()" as I saw from the examples. — Jamil Alisgenderov, Aug 12 '17 at 10:25

score 3 · Answer 1 · edited Nov 07 '17 at 18:28

3

you need to add password and confirmation password into group

so your function should be like.

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_group':this.formBuilder.group(
  {
    'password': ['', [Validators.required, Validators.minLength(8)]],
    'confirm_password': ['', [Validators.required, confirmPass]]
  },
  {
    validator: this.passwordConfirming
  }),
  'phone': ['', Validators.required],
  'birth_date': ['', Validators.required]
})

password validation function

 passwordConfirming(c: AbstractControl): { invalid: boolean } {
   if (c.get('password').value !== c.get('confirm_password').value) {
     return {invalid: true};
   }
 }

also, you need to formGroupName into HTML

for example:

<div class="form-group row" formGroupName="passwords">
 // here your pwd and confirmation pwd input
<div>

edited Nov 07 '17 at 18:28

LuckyStarr

1,468
2
26
39

answered Aug 12 '17 at 10:40

Shailesh Ladumor

7,052
5
42
55

I'm gonna try it. But what is wrong with my code :D – Jamil Alisgenderov Aug 12 '17 at 11:01
1

In reactive form when you call validation function on any control. that only access that control. so problem is you call function on confirm_password. so you got only its value but not password. that's why not working. – Shailesh Ladumor Aug 14 '17 at 03:54
1

But aren't we able to access other controls via root? Because root returns us form group. – Jamil Alisgenderov Aug 14 '17 at 12:14
see this https://stackoverflow.com/questions/44449673/angular-4-custom-validator-on-reactive-form-for-password-and-confirm-password-m/44449802#44449802 – Shailesh Ladumor Aug 17 '17 at 04:53

Angular 4 custom form validation not triggering

1 Answers1