Quand utiliser FormGroup vs. FormArray?

Question

FormGroup:

Un FormGroup agrège les valeurs de chaque enfant FormControl dans un objet, chaque nom de contrôle de la clé.

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

FormArray:

Un FormArray agrège les valeurs de chaque enfant FormControl dans un tableau.

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

Quand faut-il être utilisé sur les autres?

Answer 1

FormArray est une variante de FormGroup. La principale différence est que ses données sont sérialisées comme un tableau (par opposition à être sérialisé en tant qu'un objet en cas de FormGroup). Cela peut être particulièrement utile lorsque vous ne savez pas combien de contrôles sera présent dans le groupe, comme des formes dynamiques.

Je vais essayer de m'expliquer par un exemple rapide. Dire, vous avez un formulaire pour la saisie d'une commande du client pour la Pizza. Et vous placez un bouton pour ajouter et supprimer toutes les demandes spéciales. Ici est la partie html:

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

et voici la classe de composant de la définition et de manipulation des demandes spéciales:

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 offre plus de souplesse que FormGroup dans le sens où il est plus facile de manipuler FormControls à l'aide de "push", "insérer" et "removeAt" que d'utiliser FormGroup "addControl", "removeControl", "setValue" etc. FormArray méthodes de s'assurer que les contrôles sont correctement suivies dans la forme de la hiérarchie.

espérons que cette aide.

Answer 2

Afin de créer des formes réactives, un parent FormGroup . Cette FormGroup peut, en outre, contenir formControls, de l'enfant, formGroups ou formArray

FormArray peut, en outre, contenir tableau d' formControls ou formGroup lui-même.

Quand doit-on utiliser formArray?

Veuillez lire ce beau post qui explique l'utilisation de l' formArray

L'exemple intéressant dans ce blog est sur les adpic formGroup

La structure de voyages formGroup l'aide formControl et formArray ressemblerait à quelque chose comme:

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),
                                 })
                          )
              }))
})

Ne pas oublier de jouer avec cette DÉMO, et notez que l'utilisation de tableau pour l' cities et places d'un voyage.