angular - 当值在构造时更改时，表单卡在带有异步验证器的 PENDING 状态

Question

在表单组上使用带有异步验证器的响应式(Reactive)表单时，以及如果使用 patchValue 更改表单组的值时在构造函数中或在 ngOnInit 中- 即使异步验证器 observable 完成，表单仍保留在 PENDING状态。

我创建了一个 SSCCE在 Stackblitz

在示例中，您会看到一个包含两个字段的简单表单，其中指示表单状态和验证器状态。在代码中，在 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。