角度表单异步验证器触发但不更新表单有效性

Question

这是我第一次尝试异步表单验证器。它附加到我的表单的 asyncValidators 上，它正确触发，返回正确的值（对象或 null）...但表单仍然无效，并且状态停留在 PENDING 状态。所有表单组和表单控件上的

errors

属性均为 null。

如果我删除异步验证器，问题就会消失，所以它是 100% 的验证器。

这是一个旧组件，有人注入了 ChangeDetectorRef，但不是 onPush 组件。我尝试过使用 cd 来标记检查并显式检测Changes()。

有人可以告诉我我做错了什么吗？

验证者：

private validateV2Applications$(): AsyncValidatorFn {
    return (): Observable<ValidationErrors> => {
      console.log("called");
      return this.applyChargesService.rowInfo$.pipe(
        map((rowInfo) => {
          console.log('mapped');
          if (this.useApplyToInstallments && rowInfo.invalidRows.length > 0) {
            console.log('async validator is invalid!');
            return { applicationErrors: 'there are application errors' };
          }

          return null;
        }),
      );
    };
  }

表单创建代码（不确定如何添加为 formBuilder 的一部分，因此事后添加）：

// fb = FormBuilder
this.creditForm = this.fb.group(
  { /* form controls */ },
  {
    validator: [this.validatecredit(), this.validateApplicationTotal()],
  },
);

this.creditForm.setAsyncValidators([this.validateV2Applications$()]);

Answer 1

分析您的共享代码后，我没有看到任何可以解释您的问题的信息。我怀疑存在计时问题，因为您在创建表单组后添加了异步验证器。我可以帮助您解决部分问题，我们可能会很幸运，这会解决问题。

您可以向表单生成器注册异步验证器，如下所示：

// fb = FormBuilder
this.creditForm = this.fb.group(
  { /* form controls */ 
    myControl: [
      '', 
      undefined /* no validators, or your existing validators here */, 
      [this.validateV2Applications$] /* async validators */
    ] 
  },
  {
    validator: [this.validatecredit(), this.validateApplicationTotal()],
  },
);