Форма застряла в состоянии PENDING с помощью асинхронного валидатора, когда значение изменилось при построении

Question

При использовании реактивных форм с асинхронным валидатором в группе форм и при изменении значений группы форм с помощью patchValue в конструкторе или в ngOnInit - даже если наблюдаемый асинхронный валидатор завершается, форма остается в PENDING государство.

Я создал SSCCE в Stackblitz

В примере вы видите простую форму с двумя полями, с указанием статуса формы и состояния валидатора. В коде, вngOnInit Я звоню patchValue на форме, заставляя форму перейти в PENDING status и вызываемый асинхронный валидатор.

Асинхронный валидатор мало что делает, он просто ждет 1 секунду, а затем возвращает nullerror объект в основном говорит, что форма действительна. Вы можете видеть в индикации, что проверка завершена, но форма остается вPENDING статус.

Если вы инициируете изменение значений полей в любое время, кроме конструктора или ngOnInit (т.е. при построении объекта) - тогда форма переходит в VALIDстатус, когда валидатор завершит работу. Это также применимо, если вы заключите изменение значения вsetTimeout.

Я делаю что-то неправильно? Это нормальное поведение или ошибка в Angular?

Answer 1

У меня была аналогичная проблема, после того, как асинхронный валидатор застрял на PENDING, и вот как я с этим справляюсь:
1) сделать наблюдаемым изменение статуса:

this.form$ = this.form.statusChanges;

2) подписаться на наблюдаемое:

this.form$.subscribe( r => {
  if (r === 'VALID') {
    //form valid
  } else if( r === 'PENDING') {
    setTimeout(() => {
      this.form.updateValueAndValidity(); // this function will trigger statusChange one more time.
    }, 2000);
  } else {
    // any other status
  }
});

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