Question

我正在开发一个项目，我有3个FormControls，我需要以这样的方式验证它们：要么所有这些都选择了值，要么都没有，否则它们无效。如何进行这种验证？

Answer 1

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

假设你有一个这样的表格：

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

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

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

验证全部或无角度4

2 个答案: