Password Confirm Reactive Forms Angular 4

Question

I have a problem regarding my password and confirm password in my angular app. I'm using reactive forms and the error says "supplied parameters do not match any signature on call target"

ngOnInit() {
      this.form = this.formBuilder.group({
        name: [null, [Validators.required, Validators.minLength(3)]],
        email: [null, [Validators.required, Validators.email]],
        password: [null, Validators.required],
        confirm_password: [null, Validators.required],
      }, {validator: this.passwordConfirming('password', 'confirm_password')});

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

html

<div class="form-inline">       
    <label class="col-md-4">Password</label>
    <input class="col-md-8" type="password" class="form-control" id="password" formControlName="password">
    <span class="text-muted" *ngIf="!form.controls['password'].valid && form.controls['password']?.touched"> Password is required</span>
 </div>
 <div class="form-inline">       
    <label class="col-md-4">Confirm Password</label>
    <input class="col-md-8" type="password" class="form-control" id="confirm_password" formControlName="confirm_password">

 </div>

You have not closed the bracket for ngOnInit – Santosh Oct 04 '17 at 02:41 — Santosh, Oct 04 '17 at 02:41

score 7 · Accepted Answer · edited Sep 29 '18 at 11:12

7

Declare your passwordConfirming outside component class as function and then call it for example:

import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit, ViewChild } from '@angular/core';

function passwordConfirming(c: AbstractControl): any {
    if(!c.parent || !c) return;
    const pwd = c.parent.get('password');
    const cpwd = c.parent.get('confirm_password');

    if(!pwd || !cpwd) return ;
    if (pwd.value !== cpwd.value) {
        return { invalid: true };
    }
}

@Component({
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
    form: FormGroup;
    get cpwd() {
        return this.form.get('confirm_password');
    }
    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.form = this.formBuilder.group({
            name: [null, [Validators.required, Validators.minLength(3)]],
            email: [null, [Validators.required, Validators.email]],
            password: [null, Validators.required],
            confirm_password: [null, [Validators.required, passwordConfirming]]
        });
    }    
}

HTML Code:

<span *ngIf="cpwd.hasError('invalid')"> Invalid Password </span>

edited Sep 29 '18 at 11:12

Philipp Kief

8,172
5
33
43

answered Oct 04 '17 at 02:43

Atul Chaudhary

3,698
1
31
51

The Popup Modal is destroyed – Joseph Oct 04 '17 at 02:51
what is Popup Modal? I think this will be another error – Atul Chaudhary Oct 04 '17 at 02:54
The popup modal destroyed because i implemented your codes – Joseph Oct 04 '17 at 02:59
i have jus pasted the code where i am not getting any syntax error on my end – Atul Chaudhary Oct 04 '17 at 03:03
TypeError: Cannot read property 'value' of null at passwordConfirming (user-management.component.ts:8) at forms.es5.js:506 at Array.map () – Joseph Oct 04 '17 at 03:08
Anothe error UserManagementComponent_Host.html:1 ERROR TypeError: Cannot read property 'get' of undefined at passwordConfirming (user-management.component.ts:8) at forms.es5.js:506 – Joseph Oct 04 '17 at 03:10
try again with new code but error is pretty obvious to solver ur problem. – Atul Chaudhary Oct 04 '17 at 03:10
Yes i tried the new one and the error is ERROR TypeError: Cannot read property 'get' of undefined at passwordConfirming (user-management.component.ts:8) – Joseph Oct 04 '17 at 03:12
try again it is just u have to make sure that controls are defined – Atul Chaudhary Oct 04 '17 at 03:16
I've added the html. How would i do that in the html? – Joseph Oct 04 '17 at 03:20
cannot read property of hasError – Joseph Oct 04 '17 at 04:04
Expected validator to return Promise or Observable. – Hikaru Shindo May 23 '18 at 21:19
Cannot read property 'hasError' of undefined – Hikaru Shindo May 23 '18 at 21:28

Password Confirm Reactive Forms Angular 4

1 Answers1