FormArray ist eine Variante von FormGroup. Der Hauptunterschied besteht darin, dass seine Daten als Array serialisiert werden (im Gegensatz zu einer Serialisierung als Objekt bei FormGroup). Dies kann besonders nützlich sein, wenn Sie nicht wissen, wie viele Steuerelemente in der Gruppe vorhanden sein werden, z. B. dynamische Formulare.
Lassen Sie mich versuchen, dies anhand eines kurzen Beispiels zu erklären. Angenommen, Sie haben ein Formular, in dem Sie die Bestellung eines Kunden für Pizza erfassen. Und Sie platzieren eine Schaltfläche, mit der sie Sonderwünsche hinzufügen und entfernen können. Hier ist der HTML-Teil der Komponente:
<section>
<p>Any special requests?</p>
<ul formArrayName="specialRequests">
<li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
<input type="text" formControlName="{{i}}">
<button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
</li>
</ul>
<button type="button" (click)="onAddSpecialRequest()">
Add a Request
</button>
</section>
und hier ist die Komponentenklasse, die spezielle Anforderungen definiert und verarbeitet:
constructor () {
this.orderForm = new FormGroup({
firstName: new FormControl('Nancy', Validators.minLength(2)),
lastName: new FormControl('Drew'),
specialRequests: new FormArray([
new FormControl(null)
])
});
}
onSubmitForm () {
console.log(this.orderForm.value);
}
onAddSpecialRequest () {
this.orderForm.controls
.specialRequests.push(new FormControl(null));
}
onRemoveSpecialRequest (index) {
this.orderForm.controls['specialRequests'].removeAt(index);
}
FormArray bietet mehr Flexibilität als FormGroup in dem Sinne, dass es einfacher ist, FormControls mit "push", "insert" und "removeAt" zu bearbeiten, als mit FormGroups "addControl", "removeControl", "setValue" usw. FormArray-Methoden stellen sicher, dass die Steuerelemente vorhanden sind ordnungsgemäß in der Hierarchie des Formulars verfolgt.
hoffe das hilft.
Um reaktive Formulare zu erstellen, ist ein Elternteil
FormGroup
ein Muss. DiesFormGroup
kann weiter enthaltenformControls
, KindformGroups
oderformArray
FormArray
kann ferner ein Array vonformControls
oder einformGroup
selbst enthalten.Wann sollten wir formArray verwenden?
Bitte lesen Sie diesen schönen Beitrag, der die Verwendung von erklärt
formArray
Das interessante Beispiel in diesem Blog handelt von den Reisen
formGroup
Die Struktur der Reisen
formGroup
mitformControl
undformArray
würde ungefähr so aussehen:Vergessen Sie nicht, mit dieser DEMO zu spielen , und beachten Sie die Verwendung des Arrays für
cities
undplaces
für eine Reise.quelle
Aus: Anton Moiseev Buch „Winkelentwicklung mit Typoskript, 2. Auflage“. ::
Verwenden Sie FormArray, wenn Sie einem Formular programmgesteuert Steuerelemente hinzufügen (oder entfernen) müssen . Es ist ähnlich wie FormGroup aber hat eine Länge variabel . Während FormGroup ein ganzes Formular oder eine feste Teilmenge der Felder eines Formulars darstellt , stellt FormArray normalerweise eine Sammlung von Formularsteuerelementen dar, die vergrößert oder verkleinert werden können .
Sie können beispielsweise FormArray verwenden , um Benutzern die Eingabe einer beliebigen Anzahl von E-Mails zu ermöglichen.
quelle
Aus der eckigen Dokumentation können Sie das ersehen
Lassen Sie mich Ihnen ihr Beispiel zeigen und versuchen zu erklären, wie ich das verstehe. Sie können die Quelle hier sehen
Stellen Sie sich eine Form vor, die folgende Felder hat
Hier haben wir
firstName
,lastName
,address
undaliases
alle Felder zusammen Form Gruppe , so dass wir alles in wickelngroup
. Gleichzeitigaddress
ist es wie eine Untergruppe, also wickeln wir es in eine andere eingroup
(Sie können die Vorlage zum besseren Verständnis betrachten)! Jedes Formularsteuerelement hier istkey
außeraliases
und es bedeutet, dass Sie die Werte so oft eingeben können, wie Sie möchten, wie ein einfaches Array mitformBuilder
Methoden wiepush
.So verstehe ich es, hoffe es hilft jemandem.
quelle