web-dev-qa-db-fra.com

Quand utiliser FormGroup contre FormArray?

FormGroup :

Un groupe de formulaires agrège les valeurs de chaque enfant FormControl en un seul objet, chaque nom de contrôle constituant 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 utiliser l'un sur l'autre?

angularangular2-forms
63
jcroll

FormArray est une variante de FormGroup. La principale différence est que ses données sont sérialisées sous forme de tableau (au lieu d'être sérialisées sous forme d'objet dans le cas de FormGroup). Cela peut être particulièrement utile lorsque vous ne savez pas combien de contrôles seront présents dans le groupe, tels que les formulaires dynamiques.

Permettez-moi d'essayer d'expliquer par un exemple rapide. Dites, vous avez un formulaire où vous capturez la commande d'un client pour Pizza. Et vous placez un bouton pour les laisser ajouter et supprimer toutes les demandes spéciales. Voici la partie html du composant:

<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 définissant et traitant les 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 flexibilité que FormGroup dans la mesure où il est plus facile de manipuler FormControls en utilisant "Push", "insert" et "removeAt" qu'en utilisant "addControl", "removeControl", "setValue", etc. Les méthodes FormArray garantissent que les contrôles sont correctement suivi dans la hiérarchie du formulaire.

j'espère que cela t'aides.

83
Usman

Pour créer des formulaires réactifs, un parent FormGroup est indispensable. Cette FormGroup peut en outre contenir formControls, enfant formGroups ou formArray

FormArray peut en outre contenir un tableau de formControls ou un formGroup lui-même.

Quand devrions-nous utiliser formArray?

S'il vous plaît lire cette belle post qui explique l'utilisation de formArray

L'exemple intéressant de ce blog concerne les voyages formGroup

La structure des déplacements formGroup utilisant 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),
                                 })
                          )
              }))
})

N'oubliez pas de jouer avec ceci DEMO , et notez l'utilisation du tableau pour cities et places d'un voyage.

15
Amit Chigadani

Dans la documentation angular, vous pouvez voir que

FormArray est une alternative à FormGroup pour gérer un nombre quelconque de contrôles non nommés. Comme pour les instances de groupe de formulaires, vous pouvez insérer et supprimer de manière dynamique des contrôles dans des instances de tableau de formulaire. La valeur et l'état de validation de l'instance de tableau de formulaire sont calculés à partir de ses contrôles enfants. Toutefois, il n'est pas nécessaire de définir une clé pour chaque contrôle par nom. Il s'agit donc d'une excellente option si vous ne connaissez pas le nombre de valeurs enfant à l'avance.

Laissez-moi vous montrer leur exemple et essayer d'expliquer comment je comprends cela. Vous pouvez voir la source ici

Imaginez une forme qui a les champs suivants

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

Ici, nous avons firstName, lastName, address et aliases Tous les champs forment ensemble un groupe de formes. Nous allons donc tout envelopper dans group. Dans le même temps, address est comme un sous-groupe, nous l'enveloppons donc dans un autre group (vous pouvez consulter le modèle pour une meilleure compréhension)! Chaque contrôle de formulaire ici est key sauf aliases et cela signifie que vous pouvez y insérer autant de valeurs que vous le souhaitez, comme un simple tableau utilisant formBuilder des méthodes telles que Push.

C'est comme ça que je le comprends, j'espère que ça aidera quelqu'un.

0
Gh111