嵌套 ControlValueAccessor 的角度验证状态未在父级中正确传播，如何实现此验证？

Posted 2023-03-13

【中文标题】嵌套 ControlValueAccessor 的角度验证状态未在父级中正确传播，如何实现此验证？

【英文标题】：angular validation state of a nested ControlValueAccessor is not correctly propagated in parents, how to implement this validation?

【发布时间】：2021-05-25 16:10:56

【问题描述】：

我在 Angular 10 应用程序中遇到问题，在初始化时将 formGroup 的状态传播到其父级。

问题：在组件初始化时，子表单的验证状态未在多个级别的父级中正确传播。

更准确地说，我有 3 个嵌套组件。它们都是表单，并且两个孩子都实现了 ControlValueAccessor。它们通过“formControlName”属性进行通信。最深的表单初始化错误（必填字段）。 父级没有收到有效性状态（它仍然有效）。

这是问题的重现：

https://stackblitz.com/edit/ngx-sub-form-hzo8wj?file=src/app/app.component.ts

我希望“基本表单组”在初始化时无效。 “level 2”的有效性应该在“level 1”中传播，然后在“base formgroup”中传播“level 1”。

它可能来自正常的角周期。

我在等待更好的解决方案时发现了一个 hack：

  public ngAfterViewInit(): void 
    this._injector.get(NgControl).control.updateValueAndValidity();
  

在第一个角循环之后，我们从子节点手动重新启动父节点的验证。这是级联在所有子组件中的。

我怎样才能避免使用这个黑客？

【问题讨论】：

看看我的问题 - 它会帮助你解决你的问题***.com/q/57186593/9590251

【参考方案1】：

感谢https://***.com/a/66333524/9337778 的回答，

所以我从那里开始。相反，我从添加到父级的子级开始。然后我把它全部放在一个指令中。在这种情况下，不再需要 ControlValueAccessor。

Here the final result

【讨论】：

是的，也可以这样实现，很好的解决方案！

【参考方案2】：

您的父表单是有效的，因为它不知道嵌套控件，因为 AbstractSubformComponent 的每个实例都会创建自己的 formGroup。 解决此问题的一种方法是将子控件动态添加到父表单组。Here is your stackblitz with changes