Angular программно необходимый валидатор не работает

Question

У меня есть флажок, который отображает некоторые поля и скрывает некоторые в зависимости от его значения (проверено или нет)

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

onSwitchCheckbox({ checked: isChecked }) {
    // small timeout to give time to DOM to render the fields because they are hidden with *ngIf="isCheckedCheckBox" (isCheckedCheckBox is a global variable)
    setTimeout(() => {
        this.isCheckedCheckBox = isChecked;
        if (isChecked) {      
            this.formGroup.controls.fieldB.setValidators([Validators.required]);
            this.formGroup.controls.fieldC.setValidators([Validators.required]);
            this.formGroup.controls.fieldA.clearValidators();
        } else {
            this.formGroup.controls.fieldB.clearValidators();
            this.formGroup.controls.fieldC.clearValidators();
            this.formGroup.controls.fieldA.setValidators([Validators.required]);
        }
    
        // update fields
        this.formGroup.updateValueAndValidity();
    }, 200);
}

Проблема в том, что поле A остается обязательным, а поля B и C никогда не требуются, независимо от того, установлен флажок или нет

Что не так с моим кодом?

Большое спасибо

Answer 1

Вам нужно updateValueAndValidity из поляA formControl

Попробуйте вот так:

this.formGroup.controls.fieldA.clearValidators();
this.formGroup.controls.fieldA.updateValueAndValidity();

Рабочая демонстрация