Verschachtelte Arrays in angularen 2 reaktiven Formen?
Ich habe das folgende Tutorial verwendet, um reaktive Formen in Angular 2 zu erstellen, und es funktioniert gut.
Ich versuche jedoch jetzt, ein Array innerhalb eines Arrays hinzuzufügen. Mit dem obigen Tutorial habe ich ein Formular 'Organisation' erstellt, das ein Array von 'Kontakt' Gruppen enthalten kann. Aber ich kann das Setup nicht erfolgreich anpassen, damit jede Kontaktgruppe ein Array von E-Mail-Gruppen enthält.
Ich konnte kein Tutorial oder Beispiel finden, das dies abdeckt und wäre dankbar für irgendwelche Hinweise.
1 Antwort
Mit dem obigen Tutorial habe ich ein Formular 'Organisation' erstellt, das kann ein Array von "Kontakt" -Gruppen enthalten. Aber ich kann es nicht das Setup erfolgreich anpassen, damit jede Kontaktgruppe enthalten kann ein Array von E-Mail-Gruppen.
Das obige Tutorial gibt Ihnen alles, was Sie brauchen.
Ich nehme an, Sie wollen eine Struktur wie diese.
Zuerst brauchst du eine Komponente ( AppComponent in meinem Fall), wo du root FormGroup deklarierst. Ich nannte es trustForm unten.
app.component.ts
%Vor% In dieser Komponente haben Sie auch einige Methoden, die Ihnen helfen, die erste Ebene FormArray - contracts
app.component.html
%Vor% Es unterscheidet sich nicht von root html im Tutorial, mit Ausnahme von FormArray name.
Dann müssen Sie eine Vertragskomponente erstellen, die ähnlich zu AppComponent
contract.component.ts
%Vor%contract.component.html
%Vor% Wie Sie sehen können, ersetzen wir nur contracts zu emails FormArray und wir übergeben auch FormGroup an die E-Mail-Komponente
Und schließlich müssen Sie nur EmailComponent mit den gewünschten Feldern füllen.
email.component.ts
%Vor%email.component.html
%Vor%Abgeschlossene Version finden Sie unter Plunker-Beispiel
Wenn Sie denken, dass diese Lösung nicht richtig erscheint, weil die übergeordnete Komponente die Beschreibung der untergeordneten Komponente wie initContract und initEmails enthält, können Sie sich komplexere
Plunker Beispiel
wobei jede Komponente für ihre Funktionalität verantwortlich ist.
Wenn Sie nach einer Lösung für vorlagengesteuerte Formulare suchen, lesen Sie diesen Artikel:
Tags und Links javascript angular typescript