2017-02-18 73 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

請您分享表格複印功能。我面臨完全相同的問題,我很可能會遵循相同的定製拷貝實現技術。 –