Wie rekursiv kopieren Sie eine FormGroup?

Question

Wir versuchen, eine generische Tabellenkomponente zu erstellen, in der Elemente zu einer Tabelle hinzugefügt oder einzeln bearbeitet werden können. Die Tabelle enthält eine addFormFormGroup zum Bearbeiten von Elementen, bevor sie dem Formular hinzugefügt werden. Wenn der Artikel hinzugefügt wird, wird aus der addForm kopiert, um eine FormArray mit lodash cloneDeep().

Das Problem, auf das wir gerade stoßen, ist das Bearbeiten einer Zeile. Jede Zeile in der Tabelle hat ein Formular, das an eine editForm gebunden ist, die für die gesamte Komponente vorhanden ist. Die Idee besteht darin, die Werte aus der FormArray und in die editForm zu kopieren und dann das Formular für den Benutzer sichtbar zu machen. Leider stoßen wir auf Probleme mit einigen komplizierteren Formularen, in denen wir versuchen, diese Tabellenkomponenten ineinander zu verschachteln. Ich habe ein paar verschiedene Ansätze ausprobiert, aber sie haben jeweils ihre eigenen Gotcha ...

Mit _.cloneDeep()

Wenn ich von der FormArray zum editForm mit _.cloneDeep kopieren() wie Wir verwenden, um in die FormArray kopieren, es scheint, die formControlName Bindings durcheinander gebracht werden. Ich schätze, das ist, weil das Ersetzen dieser FormGroup an Ort und Stelle die einige interne Winkelreferenzen auf die FormGroup? Ich aufzuwickeln immer diese Fehlermeldung:

this.editForm = _.cloneDeep(this.formArray.controls[index]) as FormGroup;

Error: There is no FormControl instance attached to form control element with name: 'myControlName' 

Mit patchValue()

Mein anderer Versuch war die eingebaute in patchValue() zu verwenden, aber es sieht aus wie patchValue() doesn‘ t Griff FormArray s sehr gut.

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 
    - [] 

Schreibe eine individuelle Kopierfunktion

Wir haben auch unsere eigene Form Kopierfunktion rumliegen haben, leider scheint es auch auf FormArray s zu ersticken, da es schwierig ist, zu Sagen Sie, ob die Eigenschaften eines Objekts in einem Array ein Steuerelement oder ein anderes geschachteltes Element sein sollen 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 

So ist es eine gute Möglichkeit Formulare zu kopieren und halten alle Winkel Referenzen in Takt? Oder gibt es eine Möglichkeit, die Kopiermethode für benutzerdefinierte Formulare zu ändern und dennoch Eigenschaften unterscheiden zu können, die Gruppen sein sollten und die Steuerelemente sein sollten?

Answer 1

Ich konnte dieses Problem beheben, indem Sie eine benutzerdefinierte Formularkopiefunktion schreiben, die auf der Grundlage des FormGroup lieber als den Wert des Formulars kopiert. Die Verwendung von isinstance reichte aus, um herauszufinden, wie jedes Steuerelement in der FormGroup kopiert werden sollte.