Угловые реактивные формы - выполнить проверку после того, как поля формы показаны / скрыты при изменении значения

Question

Я работаю с реактивными формами с различными полями, необходимыми для проверки.Некоторые поля имеют условную проверку, которую следует проверять только при соблюдении условий.( т.е. если вы ответили утвердительно на поставленный выше вопрос, объясните, пожалуйста, почему)

В HTML этот код выглядит следующим образом:

<input type="text" [required]="did_you_answer_yes_to_the_previous_question" />

Таким образом, реактивныйформа не проверяет это поле, если не выполнены условия.

Затем я проверяю валидность формы на valueChanges, например:

    this.form.valueChanges
        .pipe(
            concatMap((updatedForm: any) => {
                if (this.form.dirty) {                      
                    this.service.udpateFormIsValid(this.form.valid);
                    this.form.markAsPristine();
                }

                return of(updatedForm);
            })
        )
        .subscribe((updatedForm: any) => {  });

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

Я могу легко исправить это, добавив .debounceTime(250) после наблюдаемой valueChanges, чтобы улучшить состояние гонки, но добавление ручной задержки кажется анти-pattern.

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

Answer 1

FormControl имеет statusChanges Наблюдаемый, вы можете подписаться на .

Таким образом, код может выглядеть примерно так:

        this.form.statusChanges
            .pipe(
                distinctUntilChanged()) // to reduce the noise
            .subscribe(() => {
                this.service.udpateFormIsValid(this.form.valid);
        });