Добавление пользовательского валидатора ко всей группе форм в Angular Reactive From

Question

Я динамически создаю реактивные формы в Angular на основе данных JSON, полученных из API. Иногда в форме есть только несколько элементов FormControls, но иногда существует множество групп форм или массивов форм с FormGroups.

У меня есть вопрос о FormArray с несколькими FormGroups. В этой FormGroups некоторые FormControls могут потребоваться, а некоторые нет. Но вся FormGroup не требуется. Только если некоторые FormControls в группе редактируются, после этого вся группа форм должна быть действительной (каждый требуемый FormControl не может быть пустым).

Поэтому мой вопрос заключается в том, как создать пользовательский валидатор для всей FormGroup, который будет гарантировать, что если каждый FormControl в этих конкретных группах будет пустым, то эта группа будет действительной. Но если, например, один FormControl будет отредактирован, то каждый обязательный FormControl должен быть заполнен.

Большое спасибо за ваши идеи.

Answer 1

вы добавляете валидаторы уровня группы форм, как это, используя сервис FormBuilder:

this.myFormGroup = this.formBuilder.group({ 
                     ... my group info ... 
                   }, {validators: [... validators ... ]);

пользовательский валидатор действует как любой другой, но абстрактный элемент управления в этом случае является FormGroup, который может обрабатываться как любая другая группа форм.

что-то вроде:

function allOrNoneRequired(): ValidatorFn {
  return (ctrl: AbstractControl): ValidationErrors | null => {
    const fg = ctrl as FormGroup;
    const controls = Object.values(fg.controls);
    return (controls.every(fc => !fc.value) || controls.every(fc => !!fc.value))  
             ? null 
             : {allOrNoneRequired: true};
  };
}

тогда

this.myFormGroup = this.formBuilder.group({ 
                     ... my group info ... 
                   }, {validators: [allOrNoneRequired()]);