私たちは、アイテムがテーブルに追加されるか、個別に編集することができ、一般的なテーブル・コンポーネントを構築しようとしています。フォームに追加される前にアイテムを編集するためのテーブルにはaddForm
FormGroup
があります。アイテムがaddForm
からに追加された場合lodashのcloneDeep()
でFormArray
にコピーされます。FormGroupを再帰的にコピーするには?
我々が今に実行している問題は、行を編集しています。表の各行は、全体のコンポーネントに存在するeditForm
にバインドされたフォームを持ちます。アイデアはFormArray
から出てeditForm
に値をコピーし、ユーザーにフォームが見えるようにすることです。残念ながら、これらのテーブルコンポーネントを互いに入れ子にするより複雑なフォームの問題が発生しています。私は_.cloneDeep(とeditForm
にFormArray
からコピーした場合のように)_.cloneDeep()
を使用して...
を私はいくつかの異なるアプローチを試みたが、彼らはそれぞれ独自の落とし穴を持っています我々はFormArray
にコピーするために使用すると、formControlName
バインディングが台無しになるようです。私が代わりにFormGroup
がFormGroup
にいくつかの内部の角度の参照を台無しにすることを置き換えるためである推測していますか?この時私の他の試みが使用することでした
patchValue()を使用
this.editForm = _.cloneDeep(this.formArray.controls[index]) as FormGroup;
Error: There is no FormControl instance attached to form control element with name: 'myControlName'
patchValue()
内蔵、それはdoesnのpatchValue()
のように見える」:私はこのエラーを取得する羽目になる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
の上にチョークように見える、私たち自身のカスタムフォームのコピー機能は転がってい配列内のオブジェクトのプロパティがコントロールか、別のネストされた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
ので、フォームをコピーして、タクト内のすべての角度の参照を維持するための良い方法はありますか?または、カスタムフォームのコピー方法を変更して、グループでなければならないプロパティとコントロールであるべきプロパティを区別できる方法はありますか?
フォームコピー機能を共有できますか?私はまったく同じ問題に直面しており、おそらくカスタムコピーの実装と同じテクニックに従います。 –