Wann wird FormGroup vs. FormArray verwendet?

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?

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 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.

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.

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.