2017-02-18 70 views
0

我们正在尝试构建一个通用表格组件,其中的项目可以添加到表格中或单独编辑。该表格有一个addFormFormGroup用于在将项目添加到表单之前编辑项目。当物品被添加到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 

那么,有没有复制的形式,并保持在机智所有的角引用的好办法?或者有没有办法我们可以修改我们的自定义表单复制方法,并且仍然能够区分应该是组的属性和应该控制的属性?

回答

0

我能够通过编写基于FormGroup而不是表单的值复制的自定义表单复制功能来解决此问题。使用isinstance就足以确定应如何复制FormGroup中的每个控件。

+0

请您分享表格复印功能。我面临完全相同的问题,我很可能会遵循相同的定制拷贝实现技术。 –