Question

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

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

在构造上更改值时，表单使用异步验证程序停留在PENDING状态

1 个答案: