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

Question

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

Я пытался создать собственный валидатор для этого с помощью встроенного необходимого валидатора, но он проверяет только текущий элемент управления.

allFieldRequired(ctrlName: string): ValidatorFn {
    return (ctrl: AbstractControl) => {
      if (!ctrl.parent || !Object.values(ctrl.parent.value).join('')) {
        return null;
      }
      return CustomValidators.required()(ctrl)
    }
  }

Здесь - моя реализация.

Answer 1

это может быть другой способ, но вы можете добавить необходимый валидатор динамически на основе следующего условия:

 <input type="text" formControlName="user" [required]="hasValue()">

компонент

  hasValue(){
    return Object.values(this.form.value).join('').trim().length > 0
  }

демонстрация stackblitz

Answer 2

Почему бы не просто

this.myForm.get('myFirstControl').valueChanges.subscribe(value => {
  for (const control of this.myForm.controls) {
    if (!value) { control.setValidators([]); }
    else { control.setValidators([Validators.required]); }
  }
});