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

另外，您需要将formGroupName 转换为 HTML

例如：

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