CODEWITHSUNDEEP
angularvalidationtypescriptangular-forms
Jamil Alisgenderov
Jamil Alisgenderov

Reputation: 1718

Angular 4 custom form validation not triggering

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

Upvotes: 0

Views: 2973

Answers (1)

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7252

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>

Upvotes: 3

Related Questions