Angular 使用 CVA 的动态 FormArray，未传播子验证

Question

我目前正在处理 Angular 中的动态表格 arrays。 我有一个 formArray 包含一定数量的控件（动态：D）。 当我在数组中推送一个新控件时，它会得到验证，然后通过 View（html 模板）创建一个新组件 - SubFormComponent-（通过 formArray 控件上的 ngFor 循环）。 直到那里，一切都很好。 SubFormComponent 有一个 formGroup 作为 class 属性，包含许多 formControls。 其中一个控件（“nom”）具有 Validators.required 集。 当链接到该控件的字段为空时，整个表单应该是无效的。

问题：问题是，SubFormComponent 的 formGroup 确实无效，但父 formArray 仍然有效。

您将在下面的 StackBlitz 中找到重现“问题”的代码。 我添加了一些日志来跟踪不同的步骤。 我们可以看到，一开始，formArray 得到验证（函数 validate），然后 SubFormComponent 被创建和验证。 不幸的是，formArray 验证过程没有被回调。 涉及的两个组件都使用 NG_VALIDATOR 和 NG_ACCESSOR 并实现了正确的方法。

StackBlitz ： https://stackblitz.com/edit/angular6-dynamic-form-array-hqzkmq

您对如何解决这个问题有任何见解吗？

Answer 1

在我看来，这与变化检测机制有关。

如本答案https://stackoverflow.com/a/56677462/10103986中所述，当您在表单数组中添加新的无效 formControl 时，您需要调用更改检测器。

有关错误解决方法，请参阅此 StackBlitz ： https://stackblitz.com/edit/angular6-dynamic-form-array-wgxp73?file=src/app/app.component.html