Passwort Bestätigen Reaktive Formulare Angular 4

Question

Ich habe ein Problem in Bezug auf mein Passwort und bestätige das Passwort in meiner eckigen App. Ich bin mit reaktiven Formen und der Fehler sagt „gelieferten Parameter passen keine Unterschrift auf Anrufziel“

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> 

Answer 1

erklären Ihren passwordConfirming als Funktion außerhalb Komponentenklasse und dann rufen Sie zum Beispiel

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

} 

UR HTML

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