Когда использовать FormGroup против FormArray?

FormGroup:

Группа FormGroup объединяет значения каждого дочернего FormControl в один объект с каждым именем управления в качестве ключа.
const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew'),
});

FormArray:

FormArray агрегирует значения каждого дочернего FormControl в массив.
const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew'),
]);

Когда нужно использовать другой?

Ответ 1

FormArray - это вариант FormGroup. Ключевое различие заключается в том, что его данные становятся сериализованными как массивы (в отличие от сериализации как объекта в случае FormGroup). Это может быть особенно полезно, если вы не знаете, сколько элементов управления будет присутствовать в группе, например динамические формы.

Позвольте мне попытаться объяснить на краткий пример. Скажем, у вас есть форма, где вы берете заказ на пиццу. И вы помещаете кнопку, чтобы позволить им добавлять и удалять любые специальные запросы. Вот часть 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>

Ответ 2

Для создания реактивных форм родительская группа FormGroup должна. Эта FormGroup может дополнительно содержать formControls, дочерние formGroups или formArray

FormArray может дополнительно содержать массив formControls или сам formGroup.

Когда мы должны использовать formArray?

Пожалуйста, прочитайте этот красивый пост, который объясняет использование formArray

Интересный пример в этом блоге о поездках от formGroup

Структура поездок formGroup с использованием formControl и formArray будет выглядеть примерно так:

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

Не забудьте поиграть с этим DEMO, и обратите внимание на использование массива для cities и places поездки.