angular - Angular form.statusChanges 不适用于动态表单 + asyncValidation

Question

当使用 asyncValidation 将新的 FormControl 动态添加到反应式表单时，表单会从 PENDING 变为 VALID/INVALID，但不会触发 statusChanges。

我有一个动态修改的表单，在此之后，我订阅了 statusChanges。我正在打印表单的状态，我可以检查状态是否发生了变化，但 stausChanges 没有被触发。

这是一个示例https://stackblitz.com/edit/angular-pvebmb?file=src%2Fapp%2Fapp.component.ts。

在此示例中，您可以检查是否有对 console.log 的 statusChanges 订阅。有一个按钮，当单击该按钮时，会添加一个新的 FormControl，它需要 1 秒才能完成异步验证。您可以检查，当您单击按钮时，表单的状态（打印在 html 中）从 PENDING 变为 INVALID，但没有打印与 statusChanges 相关的 console.log。

我希望每次表单的状态值更改时都会触发 statusChanges。

标签： angular

Answer 1

看起来它是按设计完成的。它不会触发状态更改，因为它在初始化（或第一次运行updateValueAndValidity）时无效，并且如果您检查 FormControl 的代码，该事件将被阻止发出。你可以在这里查看： https ://github.com/angular/angular/blob/8.2.13/packages/forms/src/model.ts#L1275

如您所见，emitEvent是错误的。

这并不能真正解决您的问题，但至少可以解释为什么会发生这种情况。在您的示例中，如果您在按下控件后立即将值设置为空值，您将获得 statusChange，因为该时间updateValueAndValidity将emitEvent设置为 true。因此，如果您真的希望 statusChanges 在初始化时触发，则 workAround 会将 formControl 的 setValue 设置为空。