Коли використовувати FormGroup проти FormArray?

Question 1

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')
]);

Коли слід використовувати одне над іншим?

Question 2

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>

Розгорніть фрагмент

і ось клас компонентів, який визначає та обробляє спеціальні запити:

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 пропонує більшу гнучкість, ніж FormGroup, в тому сенсі, що легше маніпулювати FormControls за допомогою "push", "insert" та "removeAt", ніж за допомогою "addControl", "removeControl", "setValue" і т.д. FormArray методів FormArray забезпечують контроль належним чином відстежується в ієрархії форми.

сподіваюся, це допоможе.

Question 3

Для того, щоб створити реактивні форми, батьки 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поїздки.

Question 4

З: Книга Антона Мойсеєва “Кутова розробка з машинописом, друге видання”. :

Коли вам потрібно програмно додати (або видалити) елементи керування до форми , використовуйте FormArray . Це схоже на FormGroup, але має змінну довжину . Тоді як FormGroup представляє всю форму або фіксовану підмножину полів форми , FormArray зазвичай представляє набір елементів керування формою, які можуть рости або стискатися .

Наприклад, ви можете використовувати FormArray, щоб дозволити користувачам вводити довільну кількість електронних листів.

Question 5

З кутової документації це видно

FormArray - це альтернатива FormGroup для управління будь-якою кількістю неназваних елементів керування. Як і у випадку з екземплярами групи форм, ви можете динамічно вставляти та видаляти елементи керування з екземплярів масиву форм, а значення екземпляра масиву форми та стан перевірки обчислюється з його дочірніх елементів керування. Однак вам не потрібно визначати ключ для кожного елемента управління по імені, тому це чудовий варіант, якщо ви не знаєте заздалегідь кількість дочірніх значень.

Дозвольте показати вам їх приклад і спробувати пояснити, як я це розумію. Ви можете подивитися джерело тут

Уявіть, що форма відьми має такі поля

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

Тут ми маємо firstName, lastName, addressі aliasesвсе поле разом є формою групи , тому ми обернути все в group. Водночас addressце як підгрупа, тому ми обертаємо її іншою group(Ви можете подивитися шаблон для кращого розуміння)! Кожен елемент керування формою тут, keyокрім, aliasesі це означає, що ви можете вводити в нього значення скільки завгодно, як простий масив, використовуючи formBuilderтакі методи push.

Я так це розумію, сподіваюся, це комусь допомагає.