Angular2验证器依赖于多个表单字段

发布时间：2020-12-17 08:56:13 所属栏目：安全来源：网络整理

导读：是否可以创建一个验证器，它可以使用多个值来决定我的字段是否有效？例如如果客户的首选联系方式是通过电子邮件，则电子邮件字段应为必填。谢谢。已更新示例代码… import {Component,View} from 'angular2/angular2';import {FormBuilder,Validators,for

是否可以创建一个验证器，它可以使用多个值来决定我的字段是否有效？

例如如果客户的首选联系方式是通过电子邮件，则电子邮件字段应为必填。

谢谢。

已更新示例代码…

import {Component,View} from 'angular2/angular2';
import {FormBuilder,Validators,formDirectives,ControlGroup} from 'angular2/forms';

@Component({
    selector: 'customer-basic',viewInjector: [FormBuilder]
})
@View({
    templateUrl: 'app/components/customerBasic/customerBasic.html',directives: [formDirectives]
})
export class CustomerBasic {
    customerForm: ControlGroup;

    constructor(builder: FormBuilder) {
        this.customerForm = builder.group({
            firstname: [''],lastname: [''],validateZip: ['yes'],zipcode: ['',this.zipCodeValidator] 
            // I only want to validate using the function below if the validateZip control is set to 'yes'
        });
    }

    zipCodeValidator(control) {
        if (!control.value.match(/ddddd(-dddd)?/)) {
            return { invalidZipCode: true };
        }
    }

}

对于其他已经发布的方法重申，这是我一直在创建FormGroup验证器，不涉及多个组的方式。

对于此示例，只需提供密码和confirmPassword字段的键名称。

// Example use of FormBuilder,FormGroups,and FormControls
this.registrationForm = fb.group({
  dob: ['',Validators.required],email: ['',Validators.compose([Validators.required,emailValidator])],password: ['',confirmPassword: ['',firstName: ['',lastName: ['',Validators.required]
},{validator: matchingPasswords('password','confirmPassword')})

为了使Validators接受参数，他们需要返回一个带有FormGroup或FormControl作为参数的函数。在这种情况下，我正在验证FormGroup。

function matchingPasswords(passwordKey: string,confirmPasswordKey: string) {
  return (group: FormGroup): {[key: string]: any} => {
    let password = group.controls[passwordKey];
    let confirmPassword = group.controls[confirmPasswordKey];

    if (password.value !== confirmPassword.value) {
      return {
        mismatchedPasswords: true
      };
    }
  }
}

从技术上讲，如果我知道他们的密钥，我可以验证任何两个值，但我更喜欢命名我的验证器与他们将返回的错误相同。可以修改函数以获取第三个参数，该参数表示返回的错误的键名称。

2016年12月6日更新(v2.2.4)

完整示例：https://embed.plnkr.co/ukwCXm/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!