formcontrol angular

¿Cuándo usar FormGroup vs. FormArray?

Question

FormGroup :

Un FormGroup agrega los valores de cada FormControl secundario en un objeto, con cada nombre de control como clave.

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

FormArray :

Un FormArray agrega los valores de cada FormControl secundario en una matriz.

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

¿Cuándo se debe usar uno sobre el otro?

Answer 1

De la documentación angular puede ver que

FormArray es una alternativa a FormGroup para administrar cualquier número de controles sin nombre. Al igual que con las instancias de grupo de formulario, puede insertar y eliminar dinámicamente controles de instancias de matriz de formulario, y el valor de instancia de matriz de formulario y el estado de validación se calcula a partir de sus controles secundarios. Sin embargo, no necesita definir una clave para cada control por nombre, por lo que es una excelente opción si no conoce el número de valores secundarios de antemano.

Déjame mostrarte su ejemplo y tratar de explicar cómo entiendo esto. Puedes ver la fuente here

Imagine una forma que la bruja tiene los siguientes campos

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

Aquí tenemos firstName , lastName , address y aliases Todos los campos juntos son un grupo de forma, así que envolvemos todo en group . Al mismo tiempo, la address es como un subgrupo, por lo que la envolvemos en otro group (¡puede ver la plantilla para una mejor comprensión)! Cada control de formulario aquí es key excepto los aliases lo que significa que puede insertar sus valores tanto como desee, como una matriz simple, utilizando métodos de formBuilder como push .

Así es como lo entiendo, espero que ayude a alguien.

Answer 2

FormArray es una variante de FormGroup. La diferencia clave es que sus datos se serializan como una matriz (en lugar de serializarse como un objeto en el caso de FormGroup). Esto puede ser especialmente útil cuando no sabe cuántos controles estarán presentes dentro del grupo, como los formularios dinámicos.

Déjame intentar explicarte con un ejemplo rápido. Digamos que tiene un formulario donde captura el pedido de un cliente para Pizza. Y coloca un botón para permitirles agregar y eliminar cualquier solicitud especial. Aquí está la parte html del componente:

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

y aquí está la clase de componente que define y maneja solicitudes especiales:

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 ofrece más flexibilidad que FormGroup en el sentido de que es más fácil manipular FormControls usando "push", "insert" y "removeAt" que usando FormGroup "addControl", "removeControl", "setValue", etc. Los métodos FormArray aseguran que los controles sean seguido correctamente en la jerarquía del formulario.

espero que esto ayude.

Answer 3

Para crear formularios reactivos, un FormGroup primario es imprescindible. Este FormGroup puede contener además formControls , child formGroups o formArray

FormArray puede contener además una matriz de formControls o un formGroup sí.

¿Cuándo debemos usar formArray?

Lea esta hermosa post que explica el uso de formArray

El ejemplo interesante en ese blog es sobre los viajes de formGroup

La estructura de los viajes formGroup usando formControl y formArray se vería así:

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

No olvides jugar con esta DEMO , y notar el uso de array para cities y places de un viaje.