[英]angular validation state of a nested ControlValueAccessor is not correctly propagated in parents, how to implement this validation?
我在 angular 10 应用程序中遇到问题,在初始化时将 formGroup 的 state 传播到其父级。
问题:在组件初始化时,子表单的验证 state 未在多个级别的父级中正确传播。
更准确地说,我有 3 个嵌套组件。 它们都是 forms 并且两个孩子都实现了 ControlValueAccessor。 它们通过“formControlName”属性进行通信。 最深的表单初始化错误(必填字段)。 父级没有收到有效性状态(它仍然有效)。
这是问题的重现:
https://stackblitz.com/edit/ngx-sub-form-hzo8wj?file=src/app/app.component.ts
我希望“基本表单组”在初始化时无效。 “level 2”的有效性应该在“level 1”中传播,然后在“base formgroup”中传播“level 1”。
它可能来自正常的 angular 循环。
在等待更好的解决方案时,我发现了一个 hack:
public ngAfterViewInit(): void {
this._injector.get(NgControl).control.updateValueAndValidity();
}
在第一个 angular 循环之后,我们手动从子节点重新开始验证父节点。 这是级联在所有子组件中的。
我怎么能避免使用这个黑客?
感谢这个答案https://stackoverflow.com/a/66333524/9337778 ,
所以我从那里开始。 相反,我从添加到父级的子级开始。 然后我把它全部放在一个指令中。 在这种情况下,不再需要 ControlValueAccessor。
您的父表单是有效的,因为它不知道嵌套控件,因为AbstractSubformComponent的每个实例都会创建它自己的 formGroup。
解决它的一种方法是将子控件动态添加到父表单组。
这是你的堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.