问依赖于多个表单域的Angular2验证器
EN

Stack Overflow用户

提问于 2015-08-03 13:30:25

回答 15查看 99.4K关注 0票数 126

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

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

谢谢。

已更新示例代码...

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

    }

angular

回答 15

Stack Overflow用户

发布于 2016-01-03 23:39:50

在某种程度上重申其他人发布的方法，这是我创建不涉及多个组的FormGroup验证器的方式。

对于本例，只需提供password和confirmPassword字段的键名。

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

为了让Validators接受参数，它们需要返回一个参数为FormGroup或FormControl的function。在本例中，我将验证一个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
      };
    }
  }
}

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

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

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

票数 153

Stack Overflow用户

发布于 2016-02-26 02:23:21

Dave's answer非常非常有帮助。但是，稍微修改一下可能会对某些人有所帮助。

如果需要向Control字段添加错误，可以保留表单和验证器的实际结构：

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

不是在ControlGroup上设置错误，而是在实际字段上设置错误，如下所示：

function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
  return (group: ControlGroup) => {
    let passwordInput = group.controls[passwordKey];
    let passwordConfirmationInput = group.controls[passwordConfirmationKey];
    if (passwordInput.value !== passwordConfirmationInput.value) {
      return passwordConfirmationInput.setErrors({notEquivalent: true})
    }
  }
}

票数 53

Stack Overflow用户

发布于 2017-05-20 16:27:13

在为多个表单域实现验证器时，必须确保在更新每个表单控件时重新计算验证器。大多数示例都没有为这种情况提供解决方案，但这对于数据一致性和正确的行为非常重要。

请参阅我为Angular 2实现的自定义验证器，其中考虑到了这一点：https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30。

我使用otherControl.valueChanges.subscribe()侦听其他控件的更改，使用thisControl.updateValueAndValidity()在其他控件更改时触发另一轮验证。

我正在复制下面的代码，以供将来参考：

match-other-validator.ts

import {FormControl} from '@angular/forms';


export function matchOtherValidator (otherControlName: string) {

  let thisControl: FormControl;
  let otherControl: FormControl;

  return function matchOtherValidate (control: FormControl) {

    if (!control.parent) {
      return null;
    }

    // Initializing the validator.
    if (!thisControl) {
      thisControl = control;
      otherControl = control.parent.get(otherControlName) as FormControl;
      if (!otherControl) {
        throw new Error('matchOtherValidator(): other control is not found in parent group');
      }
      otherControl.valueChanges.subscribe(() => {
        thisControl.updateValueAndValidity();
      });
    }

    if (!otherControl) {
      return null;
    }

    if (otherControl.value !== thisControl.value) {
      return {
        matchOther: true
      };
    }

    return null;

  }

}

用法

下面是如何在反应式表单中使用它：

private constructForm () {
  this.form = this.formBuilder.group({
    email: ['', [
      Validators.required,
      Validators.email
    ]],
    password: ['', Validators.required],
    repeatPassword: ['', [
      Validators.required,
      matchOtherValidator('password')
    ]]
  });
}