angular 嵌套 ControlValueAccessor 的验证状态未在 parents 中正确传播,如何实现此验证?
angular validation state of a nested ControlValueAccessor is not correctly propagated in parents, how to implement this validation?
我在 angular 10 应用程序中遇到问题,在初始化时将 formGroup 的状态传播到其 parent。
问题:在组件初始化时,sub-form 的验证状态未在超过一级的 parent 中正确传播。
更准确地说,我有 3 个嵌套组件。它们都是表单,并且 children 都实现了 ControlValueAccessor。它们通过“formControlName”属性进行通信。最深的表单初始化错误(必填字段)。
parent 未收到有效性状态(它仍然有效)。
这里是问题的重现:
https://stackblitz.com/edit/ngx-sub-form-hzo8wj?file=src/app/app.component.ts
我希望“基本表单组”在初始化时无效。 “级别 2”的有效性应在“级别 1”中传播,然后在“基本表单组”中传播“级别 1”。
可能来自正常的angular周期。
我在等待更好的解决方案时发现了一个 hack:
public ngAfterViewInit(): void {
this._injector.get(NgControl).control.updateValueAndValidity();
}
我们在第一个 angular 周期后从 child 手动重新启动 parent 的验证。这在所有 sub-components.
中都是级联的
我怎样才能避免使用这个技巧?
您的父表单有效,因为它不知道嵌套控件,因为 AbstractSubformComponent 的每个实例都会创建自己的表单组。
一种修复方法是将子控件动态添加到父表单组。
Here is your stackblitz with changes
感谢您的回答 ,
所以我从那里开始。相反,我从添加到 parent 的 child 开始。然后我把它全部放在一个指令中。在这种情况下,不再需要 ControlValueAccessor。
我在 angular 10 应用程序中遇到问题,在初始化时将 formGroup 的状态传播到其 parent。
问题:在组件初始化时,sub-form 的验证状态未在超过一级的 parent 中正确传播。
更准确地说,我有 3 个嵌套组件。它们都是表单,并且 children 都实现了 ControlValueAccessor。它们通过“formControlName”属性进行通信。最深的表单初始化错误(必填字段)。 parent 未收到有效性状态(它仍然有效)。
这里是问题的重现:
https://stackblitz.com/edit/ngx-sub-form-hzo8wj?file=src/app/app.component.ts
我希望“基本表单组”在初始化时无效。 “级别 2”的有效性应在“级别 1”中传播,然后在“基本表单组”中传播“级别 1”。
可能来自正常的angular周期。
我在等待更好的解决方案时发现了一个 hack:
public ngAfterViewInit(): void {
this._injector.get(NgControl).control.updateValueAndValidity();
}
我们在第一个 angular 周期后从 child 手动重新启动 parent 的验证。这在所有 sub-components.
中都是级联的我怎样才能避免使用这个技巧?
您的父表单有效,因为它不知道嵌套控件,因为 AbstractSubformComponent 的每个实例都会创建自己的表单组。
一种修复方法是将子控件动态添加到父表单组。
Here is your stackblitz with changes
感谢您的回答
所以我从那里开始。相反,我从添加到 parent 的 child 开始。然后我把它全部放在一个指令中。在这种情况下,不再需要 ControlValueAccessor。