4

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

我在 Stackblitz 中创建了一个SSCCE

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

异步验证器没有做太多，它只是等待 1 秒然后返回一个null错误对象，基本上说表单是有效的。您可以在指示中看到验证已完成，但表单仍处于PENDING状态。

如果您在构造函数或ngOnInit（即对象构造）之外的任何时间触发字段值的更改 - 那么当验证器完成时表单会进入VALID状态。如果您将值更改包装在setTimeout.

难道我做错了什么？这是正常行为，还是 Angular 中的错误？

4

1 回答 1

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。

于 2020-05-26T09:53:00.067 回答