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

前端之家收集整理的这篇文章主要介绍了Angular2验证器依赖于多个表单字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以创建一个验证器,它可以使用多个值来决定我的字段是否有效?

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

谢谢。

已更新示例代码

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(/\d\d\d\d\d(-\d\d\d\d)?/)) {
            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/

原文链接:https://www.f2er.com/angularjs/146290.html

猜你在找的Angularjs相关文章