Angular 6 嵌套子 child 反应形式未重置

Question

我有一个两层嵌套的 FormGroup。

我通过 @Input 将一个 FormGroup 传递给第一个 child 组件网络 myForm.get('network')。

在组件网络内部，我通过 @Input 在另一个组件（代理组件）中传递一个子 FormGroup network?.get('proxy')。

样本:

this.myForm = fb.group({ 
     id: [null],
     network: fb.group({
       status: [true],
       proxy: fb.group({ enable: [true] })
     })
  })

总结:

Parent 组件 => myForm

child 网络组件 => myForm.get('network') ngOnChanges 触发器

sub child代理组件=> myForm.get('network')ngOnChanges not trigger

ps：我在每个 child 上使用 ChangeDetectionStrategy.OnPush。

问题:

但我似乎在从我的 parent (myForm) myForm.reset() 重置时，他只重置了网络组件中的一个子级别，但没有重置代理子 child 组件中的子级别。

我如何从子 child 的根链接这个重置？

我尝试在观察中传递 formGroup 并异步结果，但要在我的所有结构中复杂地使用它。

我的想法是:

使用 @ViewChild 从网络调用 child 代理并从那里重置，但对我来说看起来很奇怪。

是更好的解决方案吗？

Answer 1

我认为你应该把 changeDetection: ChangeDetectionStrategy.OnPush 放在你的 parent 组件上 (AppComponent) 而不是像你把它放在你的 child 上那样放在它的 children 上ren，你是在告诉 parent 它存在任何变化 (parent) 不能对它们进行突变 (child仁)。当它的 data/form 依赖于另一个组件时，就会发生这种情况。如果它是独立的，您可以安全地放置 OnPush ChangeDetection 以使活动数据中的任何内容不可变。

在您的情况下，您只是从 parent 中借用了原始数据。所以当你在你的 children 上声明 OnPush 时，它会将当前获取的 @childForm 设置为它们自己的并使其不可变，并且不会从任何 events/emitted 改变，除非 action 应该是在其 child 组件内执行。

Answer 2

由于 ChangeDetectionStrategy.OnPush.

，您无法重置 child 组件

更新 children 表格有两种方式：

手动调用 markForCheck()（通过 Subject/Observable 组合发出 children 重置）
在 reset()

由于两个嵌套组件，我建议采用选项 1，让 children 负责反映更改。

这是一个工作示例：https://stackblitz.com/edit/angular-pskaws

Angular 6 嵌套子 child 反应形式未重置

Angular 6 nested sub child reactive Form not reset

forms

components

children

reset

angular