Angular父子表单合并：如何将子表单控件直接并入父表单？

要实现子表单控件直接平铺到父表单而非嵌套，核心思路是将子表单中的每个独立控件逐一添加到父表单，而非把整个子表单作为父表单的一个嵌套FormGroup。

具体实现代码 #

修改父组件的ngAfterViewInit方法，遍历子表单的所有控件并逐个添加到父表单：

@ViewChild(ChildComponent) childComponent;

ngAfterViewInit(): void {
  // 遍历子表单的所有控件键名
  Object.keys(this.childComponent.childForm.controls).forEach(controlName => {
    const control = this.childComponent.childForm.get(controlName);
    if (control) {
      // 将子表单的单个控件添加到父表单
      this.parentForm.addControl(controlName, control);
    }
  });
}

额外注意事项 #

1. 状态同步：由于直接复用子表单控件的引用，父表单与子表单的控件值、校验状态会自动同步，无需额外处理。
2. 内存泄漏防范：当子组件销毁时，记得从父表单中移除对应的控件，避免内存泄漏：

ngOnDestroy(): void {
  Object.keys(this.childComponent.childForm.controls).forEach(controlName => {
    this.parentForm.removeControl(controlName);
  });
}

3. 动态控件处理：如果子表单会动态添加/删除控件，需要在子组件中通过事件通知父组件，同步更新父表单的控件列表。

这样处理后，父表单的结构就会变为你想要的平铺形式：

parentForm: {
  checkbox: false
}

内容的提问来源于stack exchange，提问作者DaumannM