当构造时值发生变化时，表单因异步验证器而陷入 PENDING 状态

Question

当在表单组上使用带有异步验证器的反应式表单时，如果通过patchValue在构造函数或 in 中使用来更改表单组的值ngOnInit- 即使异步验证器可观察完成，表单仍保持PENDING状态。

我在Stackblitz中创建了一个SSCCE

在示例中，您会看到一个包含两个字段的简单表单，其中指示表单状态和验证器状态。在代码中，ngOnInit我调用patchValue表单，导致表单进入PENDING状态，并调用异步验证器。

异步验证器没有做太多事情，它只是等待 1 秒，然后返回一个null错误对象，基本上表明表单是有效的。您可以在指示中看到验证已完成，但表单仍保持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。