В этой статье блога мы рассмотрим различные методы определения типа переменной FormArray в Angular и добавления в нее FormGroup. Мы будем использовать разговорный язык и приводить примеры кода, чтобы упростить понимание концепций. Итак, приступим!

Метод 1: использование реактивных форм
Angular предоставляет мощную функцию, называемую реактивными формами, которая позволяет нам определять сложные структуры форм. Чтобы определить тип переменной FormArray, выполните следующие действия:

Шаг 1. Импортируйте необходимые модули и классы.

import { FormGroup, FormArray, FormControl } from '@angular/forms';

Шаг 2. Создайте экземпляр FormGroup.

const myForm = new FormGroup({
  myArray: new FormArray([])
});

Шаг 3. Получите элемент управления FormArray из FormGroup.

get myArray(): FormArray {
  return this.myForm.get('myArray') as FormArray;
}

Шаг 4. Добавьте новую группу форм в FormArray.

const newGroup = new FormGroup({
  name: new FormControl(''),
  email: new FormControl('')
});
this.myArray.push(newGroup);

Метод 2: Формы на основе шаблонов
Если вы предпочитаете формы на основе шаблонов реактивным формам, вы можете добиться того же результата, выполнив следующие действия:

Шаг 1. Импортируйте необходимые модули и классы.

import { Component } from '@angular/core';

Шаг 2. Определите FormArray в классе компонента.

myArray: any[] = [];

Шаг 3. Добавьте новую группу форм в FormArray.

<form>
  <div *ngFor="let group of myArray; let i = index">
    <input type="text" name="name{{i}}" [(ngModel)]="group.name">
    <input type="email" name="email{{i}}" [(ngModel)]="group.email">
  </div>
  <button (click)="addFormGroup()">Add Group</button>
</form>

addFormGroup(): void {
  this.myArray.push({
    name: '',
    email: ''
  });
}

В этой статье мы рассмотрели два метода определения типа переменной FormArray в Angular и помещения в нее FormGroup. Мы рассмотрели подходы как к реактивным формам, так и к формам, управляемым шаблонами. Следуя приведенным примерам, вы сможете легко реализовать эти функции в своих приложениях Angular.