Angular 4自定义表单验证不触发

我想创建自定义验证来验证密码是否相同，但问题是自定义验证程序不触发。对不起，我无法分享plunkr。Angular 4自定义表单验证不触发

//这里是注册组件（进口）

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('/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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 } }; 
    }; 
}

来源

2017-08-12 Jamil Alisgenderov

还不确定，但是在验证器检查中，一条建议使用===而不是==。与我的最小/最大验证器相比，我也只是相当于return {'confirmPass'：{controller.value}}而在主代码中，它需要validators数组中的confirmPass（）吗？ – JGFMK

感谢'==='的东西，不需要使用“（）”，就像我从例子中看到的那样。 –

你需要添加密码和确认密码，组

所以你的功能应该是这样的。

this.register_form = this._fb.group({ 
    'name': ['', Validators.required], 
    'surname': ['', Validators.required], 
    'email': ['', [Validators.required, Validators.pattern('/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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>

来源

2017-08-12 10:40:37

我要试一下。但是我的代码出了什么问题：D –

在任何控件上调用验证函数时都是反应形式。那只能访问那个控件。所以问题是你在confirm_password上调用函数。所以你只有它的价值，但没有密码。这就是为什么不能工作。 –

但是我们不能通过root访问其他控件吗？因为root返回我们的表单组。 –

Angular 4自定义表单验证不触发

回答

相关问题