验证全部或 none Angular 4

Question

我正在做一个项目，我有 3 个 FormControl，我需要以这样的方式验证它们，即它们都选择了值或 none 个值，否则它们无效。如何进行这种验证？

Answer 1

所以您可能想要创建一个验证，该验证不适用于单个字段，而是应用于 Angular 反应形式的 FormGroup。

假设您有这样的表格：

this.form = this.fb.group({
  firstname: '',
  surname: '',
  age: '',
  address: this.fb.group({
    street: '',
    zipCode: ''
  }, { validator: addressRequired })
});

..然后您可以看到我如何在 address FormGroup 上应用组验证器。这里的验证器实现实际上非常具体，验证用户是否同时提供 street 和 zipCode 或其中的 none：

const addressRequired = (control: AbstractControl) => {
  const street = control.get('street');
  const zipcode = control.get('zipCode');

  const values = [
    street.value,
    zipcode.value
  ];

  if(values.every(x => x === '') || values.every(x => x !== '')) {
    return null
  } else {
    return { addressIncomplete: true };
  }
}

这是一个运行示例：

https://stackblitz.com/edit/angular-reactiveforms-formgroup-validation?file=app/person-edit.component.ts

只是为了展示组验证器，这实际上是一个愚蠢的做法。但是您可以通过动态迭代组 s.t 的控件轻松地概括验证器。它适用于每个表单组。

玩得开心

Answer 2

你可以使用这个通用验证器。

// all-or-none.validator.ts

import { FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export const allOrNoneRequiredValidator: ValidatorFn = (group: FormGroup): ValidationErrors | null => {
  const keys: string[] = Object.keys(group.controls);
  const valid: boolean = keys.every((key: string): boolean => !!group.controls[key].value) ||
    keys.every((key: string): boolean => !group.controls[key].value);
  return valid ? null : { allOrNoneRequired: true };
};

并按如下方式使用。

import { allOrNoneRequiredValidator } from '/path/to/all-or-none-required.validator';

...

this.form = this.formBuilder.group({
  firstName: '',
  lastName: '',
  address: this.formBuilder.group({
    street: '',
    zipCode: ''
  }, { validators: allOrNoneRequiredValidator })
});

验证全部或 none Angular 4

Validation all or none Angular 4

angular

angular-reactive-forms