当值发生变化时，表单被异步验证器卡在PENDING状态。

Question

当在表单组上使用带有异步验证器的反应式表单时，如果通过使用 patchValue 在构造函数中或在 ngOnInit - 即使异步验证器观察器完成，表单仍然处于 PENDING 态。

我已经创建了一个 SSCCE 在 叠加闪电战

在这个例子中，你看到一个简单的表单，有两个字段，有表单状态的指示，还有验证器的状态。在代码中，在 ngOnInit 我叫 patchValue 在表格上，导致表格进入 PENDING 状态，以及要调用的异步验证器。

异步验证器并没有做什么，它只是简单地等待1秒，然后返回一个 null errors对象，基本上说明表单是有效的。你可以在指示中看到，验证完成了，但表单停留在了 PENDING 状态。

如果您在构造函数或在 ngOnInit (即在对象构造上)--那么形式确实进入了 VALID 的状态。这也适用于你把值的变化包装在 setTimeout.

我是不是做错了什么？这是正常的行为，还是Angular的bug？

Answer 1

我有一个类似的问题，在异步验证器后，表单卡在PENDING上，我是这样处理的。1)让状态变化的observable。

this.form$ = this.form.statusChanges;

2) 订阅observable。

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
  }
});

所以如果async validator结束了，但没有触发statusChange，那么你能做的就是自己再触发一次statusChange。