Angular 父表单 + childForm

Question

我有一个问题，我也没有找到答案，我很好奇你们中是否有人遇到过这个。

想象一下有一个 ParentForm 和一个 ChildForm。子级和父级都是一个 Angular 组件。

parentForm: FormControl = new FormBuilder.group({})

childForm: FormControl = new FormBuilder.group({
 checkbox: false,
})

现在如果我想将childForm添加到parentForm以连接它们，我会这样做：

@(ViewChild)(ChildComponent) = childComponent;

ngAfterViewInit(): {
   this.parentForm.addControl('childFormName', this.childComponent.childForm)
}

这整个操作将使 ParentForm 看起来像这样：

parentForm: {
 childFormName: {
  checkbox: false
 }
}

我不想要这个，我不想给添加的表单一个额外的名称，并且希望它看起来像这样：

parentForm: {
  checkbox: false
}

有人遇到过这个用例吗？

提前感谢您的帮助

Answer 1

首先，我将克隆子表单，因为我不希望子表单上的更新传播到父表单。然后简单地使用对象解构将控件添加到父窗体。

我使用

cloneDeep

中的

lodash

进行克隆，因为它是创建深度克隆的最可靠方法（我的偏好）。

ngOnInit() {
  const cloneChildForm = cloneDeep(this.childForm);
  this.parentForm = this.fb.group({
    ...this.parentForm.controls,
    ...cloneChildForm.controls,
  });

  console.log(this.parentForm);
}

Stackblitz 演示