角度4のカスタムフォームの検証がトリガーされない

Question

パスワードが同じかどうかを検証するカスタム検証を作成したいが、問題はカスタム検証ツールではない。申し訳ありませんが、私はplunkrを共有できません。

//ここでは、レジスタコンポーネント（輸入）

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

//検証関数

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

あなたがグループにパスワードと確認パスワードを追加する必要が

Answer 1

ので、あなたの関数であります似ているはずです。

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

パスワード検証機能

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

また、あなたは、例えばHTML

にformGroupNameする必要があります。

<div class="form-group row" formGroupName="passwords"> 
// here your pwd and confirmation pwd input 
<div>