Angular 带有 BehaviorSubject 的 asyncValidator

Question

我正在创建 Angular 表格。在给定的示例中，您可以找到我的代码。我正在尝试使用异步验证器创建多组表单。 案例很容易验证列表中是否存在数字。在实际情况下，该列表将从服务器获取，但出于演示目的，我只添加了两个按钮。

如果我用

{ asyncValidators: [DataDuplicatedAsyncFuncValidator(of([1, 11]))] }

传递数据。一切正常。如果我通过 observable from subject form 在其有效和无效时处于奇怪的状态:)

请帮助我：

Example

Answer 1

原因是您的 ID 来源从未完成。要在一个事件后完成它，您可以使用 take(1) operator

 return existing$.pipe(
      take(1),
      ...

Answer 2

您正在更改验证输入值所依据的数据，而不是验证的输入数据。只要验证函数 returns 返回的可观察值是一个值，angular 就不会关心之后发生的变化。

此外，我认为 angular 正在等待 observable 完成，混合状态意味着两者都不是真的，因为验证器尚未完成。

这意味着要重新评估有效性，您需要在已验证的控件上调用updateValueAndValidity()。

这里是修改后的例子：https://stackblitz.com/edit/angular-ivy-nmrymb

注：

• 我通过 shareReplay 分享了 observable，不确定是否有必要，在调试时这样做了
• 我在验证器函数中添加了一个 take(1)
• 我在更改验证数据时添加了 updateValueAndValidity()