Angular 6嵌套子子响应式(Reactive)表单未重置

Question

我有一个两级嵌套的 FormGroup。

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

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

code stackblitz

示例:

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

摘要:

父组件=> myForm

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

子子代理组件 => myForm.get('network')ngOnChanges 不触发

ps:我对每个 child 使用 ChangeDetectionStrategy.OnPush。

问题:

但是我似乎当我从我的父级(myForm)myForm.reset()重置时，他只重置网络组件中的一个子级别，但不在代理子子组件中重置。

我如何从根到子子项链接此重置？

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

我的想法是:

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

有更好的解决方案吗？

Answer 1

由于 ChangeDetectionStrategy.OnPush，您无法重置子组件.

有两种更新子表单的方法:

1. 手动调用markForCheck()(通过Subject/Observable组合发出刚刚发生重置的子项)
2. 在 reset() 上更新每个子项的 @Input

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

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