Wann wird FormGroup vs. FormArray verwendet?

89

FormGroup :

Eine FormGroup fasst die Werte jedes untergeordneten FormControl zu einem Objekt zusammen, wobei jeder Steuerelementname als Schlüssel dient.

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew'),
});

FormArray :

Ein FormArray fasst die Werte jedes untergeordneten FormControl in einem Array zusammen.

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew'),
]);

Wann sollte eines über das andere verwendet werden?

jcroll
quelle

Antworten:

116

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.

Usman
quelle
4
Was ist, wenn Sie versuchen, Formulare zu bearbeiten? Wie iterieren und fügen Sie Steuerelemente hinzu?
Ctilley79
1
Wie würden Sie dies in Komponenten umgestalten?
Justin
Ist es möglich, Objekte mit key: value anstelle von nur Werten zum Formulararray hinzuzufügen?
Anthony
Wie können wir einen Formularbezeichnungsnamen festlegen? Gibt es eine Option zum Festlegen, während die Formularsteuerung initialisiert wird? Da die Form dynamisch ist, konnten wir den Wert nicht festlegen.
Krishnadas PC
28

Um reaktive Formulare zu erstellen, ist ein Elternteil FormGroupein Muss. Dies FormGroupkann weiter enthalten formControls, Kind formGroupsoderformArray

FormArraykann ferner ein Array von formControlsoder ein formGroupselbst enthalten.

Wann sollten wir formArray verwenden?

Bitte lesen Sie diesen schönen Beitrag, der die Verwendung von erklärtformArray

Das interessante Beispiel in diesem Blog handelt von den Reisen formGroup

Die Struktur der Reisen formGroupmit formControlund formArraywürde ungefähr so ​​aussehen:

this.tripForm = this.fb.group({
    name: [name, Validators.required],
     cities: new FormArray(
       [0] ---> new FormGroup({
           name: new FormControl('', Validators.required),
               places: new FormArray(
                  [0]--> new FormGroup({
                      name: new FormControl('', Validators.required),
                         }),
                      [1]--> new FormGroup({
                         name: new FormControl('', Validators.required),
                      })
                  )
              }), 
       [1] ---> new FormGroup({
           name: new FormControl('', Validators.required),
           places: new FormArray(
               [0]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               }),
               [1]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               })
               )
      }))
})

Vergessen Sie nicht, mit dieser DEMO zu spielen , und beachten Sie die Verwendung des Arrays für citiesund placesfür eine Reise.

Amit Chigadani
quelle
Kurze und süße Erklärung.
Kanchan
erstaunliche Erklärung
Taoufik Jabbari
Ausgezeichneter Bruder.
Jalpa
@scopchanov Der Text enthält möglicherweise nicht viele Erklärungen, aber die Darstellung der Formularstruktur gibt eine Vorstellung davon. Lassen Sie mich wissen, ob wir noch etwas hinzufügen können, um die Antwort zu verbessern :)
Amit Chigadani
Nun, wenn jemand "Erklärung" sagt, dann erwarte ich genau das zu sehen. Bei allem Respekt kommt Ihre Antwort einer "Nur-Link-Antwort" gemäß den SO-Definitionen sehr nahe, denn genau dort, wo sie auf den Punkt kommt, dh wann sollten wir formArray verwenden? wird ein Link zu einem Blog-Beitrag bereitgestellt, ohne einen wesentlichen Teil davon zu zitieren. Sie haben zwar einen Code gepostet, aber auch hier keinerlei Erklärung. Es hätte einen großen Unterschied gemacht, wenn Sie beide Regeln aus diesem Blog-Beitrag zitiert hätten.
user6528273
4

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.

HS Progr
quelle
0

Aus der eckigen Dokumentation können Sie das ersehen

FormArray ist eine Alternative zu FormGroup zum Verwalten einer beliebigen Anzahl unbenannter Steuerelemente. Wie bei Formulargruppeninstanzen können Sie Steuerelemente dynamisch in Formulararrayinstanzen einfügen und daraus entfernen. Der Wert und der Validierungsstatus der Formulararrayinstanz werden aus den untergeordneten Steuerelementen berechnet. Sie müssen jedoch nicht für jedes Steuerelement einen Schlüssel nach Namen definieren. Dies ist daher eine hervorragende Option, wenn Sie die Anzahl der untergeordneten Werte nicht im Voraus kennen.

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

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

Hier haben wir firstName, lastName, addressund aliasesalle Felder zusammen Form Gruppe , so dass wir alles in wickeln group. Gleichzeitig addressist es wie eine Untergruppe, also wickeln wir es in eine andere ein group(Sie können die Vorlage zum besseren Verständnis betrachten)! Jedes Formularsteuerelement hier ist keyaußer aliasesund es bedeutet, dass Sie die Werte so oft eingeben können, wie Sie möchten, wie ein einfaches Array mit formBuilderMethoden wie push.

So verstehe ich es, hoffe es hilft jemandem.

Gh111
quelle