¿Cuándo usar FormGroup frente a FormArray?

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?

FormArray es una variante de FormGroup. La diferencia clave es que sus datos se serializan como una matriz (en lugar de ser serializados 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 formularios dinámicos.

Permítanme intentar explicarlo con un ejemplo rápido. Digamos que tiene un formulario donde captura el pedido de pizza de un cliente. Y colocas un botón para permitirles agregar y eliminar solicitudes especiales. 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's "addControl", "removeControl", "setValue", etc. Los métodos FormArray aseguran que los controles sean debidamente rastreada en la jerarquía del formulario.

espero que esto ayude.

Para crear formas reactivas, un padre FormGroupes imprescindible. Esto FormGrouppuede contener además formControls, niño formGroupsoformArray

FormArraypuede contener además una matriz de formControlso a formGroupsí mismo.

¿Cuándo debemos usar formArray?

Lea esta hermosa publicación que explica el uso deformArray

El ejemplo interesante de ese blog es sobre los viajes formGroup

La estructura de los viajes formGroupusando formControly formArrayse 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 esto DEMO y observe el uso de array para citiesy placesde un viaje.

De: Anton Moiseev Libro "Desarrollo angular con mecanografiado, segunda edición". :

Cuando necesite agregar (o quitar) controles a un formulario mediante programación , use FormArray . Es similar a FormGroup pero tiene una variable de longitud . Mientras que FormGroup representa un formulario completo o un subconjunto fijo de los campos de un formulario , FormArray generalmente representa una colección de controles de formulario que pueden crecer o reducirse .

Por ejemplo, puede usar FormArray para permitir que los usuarios ingresen una cantidad arbitraria de correos electrónicos.

Desde la documentación angular puedes ver que

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

Permítanme mostrarles su ejemplo y tratar de explicarles cómo entiendo esto. Puedes ver la fuente aquí

Imagina un formulario que 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, addressy el aliasescampo Todos juntos son el grupo formulario para que envuelven todo en group. Al mismo tiempo, addresses como un subgrupo, así que lo envolvemos en otrogroup (¡puedes mirar la plantilla para una mejor comprensión)! Todos los controles de formulario aquí están keyexcepto aliasesy significa que puede introducir sus valores tanto como desee como una matriz simple usando formBuildermétodos como push.

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