Как построить группу форм, которая реагирует на условия?

Question

У меня есть группа форм, созданная следующим образом:

this.formGroupName = this.formBuilder.group({
  control1: ['', Validators.compose([Validators.required])],
  control2: this.formBuilder.group({
    innerControl1: ['', Validators.compose([Validators.required])],
    innerControl2: ['', Validators.compose([Validators.required])]
  }),
  control3: ['', Validators.compose([Validators.required])],
});

Обычно мой пользователь постоянно вводит что-то для control1 и control3, и control2 не требуется для заполнения формы.Однако, если пользователь выбирает дополнительную опцию, я хочу, чтобы control2 также требовался.

Как мне поступить для достижения такой функциональности?Есть ли встроенные инструменты?Я попытался использовать оператор if внутри formBuilder, но это не сработало.

Answer 1

Вам необходимо использовать функцию setValidators() для динамического добавления валидаторов и функцию clearValidators() для их удаления.Кроме того, вам может понадобиться вызвать функцию updateValueAndValidity(), чтобы заставить действия проверки действовать немедленно.

Теперь, если ваше состояние вызвано внешним кодом (что-то, что не является элементом управления формы), попробуйте пример кода:

if(some-condition){
   this.formGroupName.controls.control2.setValidators([Validators.required]);
   this.formGroupName.controls.control2.updateValueAndValidity();
}else{
   this.formGroupName.controls.control2.clearValidators();
}

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

this.formGroupName.controls.anotherControl.valueChanges.subscribe(val => {

    if(val){
        this.formGroupName.controls.control2.setValidators([Validators.required]);
        this.formGroupName.controls.control2.updateValueAndValidity();
    }
    else{
        this.formGroupName.controls.control2.clearValidators();
    }

}