パスワードReactive Forms Angularを確認する4

Question

私の角型アプリケーションでは、パスワードに関する問題とパスワードの確認に問題があります。関数としてコンポーネントクラスの外にあなたのpasswordConfirmingを宣言して、たとえば

のためにそれを呼び出す

Iは、反応性のフォームを使用しているとエラーが「指定されたパラメータは、コール・ターゲット上の任意の署名と一致していない」と言う

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

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>