验证全部或无角度4

因此,您可能希望创建一个验证,该验证不应用于单个字段,而是应用于 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的控件来轻松地泛化验证器。它适用于每个表单组。

玩得开心

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

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