我有一个问题,我也没有找到答案,我很好奇你们中是否有人遇到过这个。
想象一下有一个 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
}
有人遇到过这个用例吗?
提前感谢您的帮助
首先,我将克隆子表单,因为我不希望子表单上的更新传播到父表单。然后简单地使用对象解构将控件添加到父窗体。
我使用
cloneDeep
中的 lodash
进行克隆,因为它是创建深度克隆的最可靠方法(我的偏好)。
ngOnInit() {
const cloneChildForm = cloneDeep(this.childForm);
this.parentForm = this.fb.group({
...this.parentForm.controls,
...cloneChildForm.controls,
});
console.log(this.parentForm);
}