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
– JGFMK, Commented Aug 12, 2017 at 10:13
Thanks for '===' thing and no it's not needed to use "()" as I saw from the examples. — Jamil Alisgenderov
– Jamil Alisgenderov, Commented Aug 12, 2017 at 10:25

LuckyStarr · Accepted Answer · 2017-11-07 18:28:29Z

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>

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.
But aren't we able to access other controls via root? Because root returns us form group.

Collectives™ on Stack Overflow

Angular 4 custom form validation not triggering

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related