我们正在尝试构建一个通用表格组件,其中的项目可以添加到表格中或单独编辑。该表格有一个addForm
FormGroup
用于在将项目添加到表单之前编辑项目。当物品被添加到addForm
时,将被复制到FormArray
与lodash的cloneDeep()
。如何递归地复制FormGroup?
我们现在遇到的问题是编辑一行。表格中的每一行都有一个表单,它绑定到存在于整个组件上的editForm
。这个想法是将数值从FormArray
中复制到editForm
中,然后使表单对用户可见。不幸的是,我们遇到了一些更复杂的表单的问题,我们试图将这些表格组件嵌套在一起。我已经尝试了几种不同的方法,但他们每个人都有自己的疑难杂症...
使用_.cloneDeep()
如果我从FormArray
复制到editForm
与_.cloneDeep()之类我们用来复制到FormArray
看起来formControlName
绑定变得搞砸了。我猜这是因为替换FormGroup
就会造成FormGroup
的一些内部角度引用?我拉闸收到此错误:
this.editForm = _.cloneDeep(this.formArray.controls[index]) as FormGroup;
Error: There is no FormControl instance attached to form control element with name: 'myControlName'
使用patchValue()
我在这个其他的尝试是使用内置的patchValue()
,但它看起来像patchValue()
没有按” t很好地处理了FormArray
。
this.editForm.patchValue((this.formArray.controls[index] as FormGroup).getRawValue());
> this.formArray.controls[0].controls['treatingPhysicians'].controls[0].controls
- Object
- address: FormGroup
- id: FormControl
- physicianFullName: FormControl
- __proto__: Object
> this.editForm.controls['treatingPhysicians'].controls[0].controls
- []
编写自定义复制功能
我们也有我们自己的自定义窗体复印功能奠定左右,遗憾的是它似乎也呛上FormArray
S,因为它很难判断数组中某个对象的属性是否应该是一个控件或另一个嵌套的FormGroup
。
this.editForm = this.buildOutValues((this.formArray.controls[index] as FormGroup).getRawValue(), this.editForm);
> this.formArray.controls[0].controls['treatingPhysicians'].controls[0].controls
- Object
- address: FormGroup
- id: FormControl
- physicianFullName: FormControl
- __proto__: Object
> this.editForm.controls['treatingPhysicians'].controls[0].controls
- Object
- address: FormControl
- id: FormControl
- physicianFullName: FormControl
- __proto__: Object
那么,有没有复制的形式,并保持在机智所有的角引用的好办法?或者有没有办法我们可以修改我们的自定义表单复制方法,并且仍然能够区分应该是组的属性和应该控制的属性?
请您分享表格复印功能。我面临完全相同的问题,我很可能会遵循相同的定制拷贝实现技术。 –