Wann FormGroup vs. FormArray verwenden?

Question

FormGroup:

A FormGroup aggregiert die Werte jedes Kind in ein Formcontrol Objekt, wobei jeder Steuerelementnamen als Schlüssel.

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

FormArray:

A FormArray aggregiert die Werte jedes Kind in ein Formcontrol Array.

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

Wenn übereinander verwendet werden soll?

Answer 1

FormArray ist eine Variante von FormGroup. Der Hauptunterschied besteht darin, dass seine Daten als Array serialisiert werden (im Gegensatz zu einer Serialisierung als Objekt im Fall von FormGroup). Dies ist besonders hilfreich, wenn Sie nicht wissen, wie viele Steuerelemente in der Gruppe vorhanden sind, beispielsweise dynamische Formulare.

Lassen Sie mich versuchen, an einem kurzen Beispiel 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, damit sie spezielle Anforderungen hinzufügen und entfernen können. Hier ist die 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 sind die Komponentenklasse definiert und Handhabung besondere Anfragen:

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 leichter zu manipulieren ist Verwenden Sie FormControls, die "push", "insert" und "removeAt" verwenden, als die FormGroup-Methoden "addControl", "removeControl", "setValue" usw. FormArray-Methoden stellen sicher, dass die Steuerelemente in der Formularhierarchie ordnungsgemäß nachverfolgt werden.

hoffe das hilft.