0Pricing
Angular Academy · Урок

FormArray и динамические поля

Добавляйте и удаляйте элементы управления формой во время выполнения

«FormArray и динамические поля» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Динамические наборы полей

В некоторых формах количество полей меняется, например в списке телефонных номеров или позиций заказа. FormArray управляет упорядоченной коллекцией элементов управления, которую можно расширять.

Создание FormArray

FormArray содержит массив элементов управления или групп.

const phones = new FormArray([
  new FormControl(''),
  new FormControl('')
]);

Внутри FormGroup

Встройте массив в родительскую группу, чтобы он стал частью общего значения формы.

const form = new FormGroup({
  name: new FormControl(''),
  phones: new FormArray<FormControl<string>>([])
});

Добавление элементов управления

Вызовите push, чтобы динамически добавить новый элемент управления в конец.

addPhone() {
  this.phones.push(new FormControl('', { nonNullable: true }));
}

Удаление элементов управления

Используйте removeAt(index), чтобы удалить определённый элемент управления.

removePhone(i: number) {
  this.phones.removeAt(i);
}

Отображение с помощью @for

Перебирайте элементы управления массива в шаблоне, связывая каждый из них по индексу с помощью formControlName.

<div formArrayName="phones">
  @for (ctrl of phones.controls; track $index) {
    <input [formControlName]="$index" />
  }
</div>

Директива formArrayName

formArrayName связывает блок шаблона с массивом, а вложенная директива formControlName использует числовой индекс.

Массивы групп

Для более сложных элементов храните в массиве объекты FormGroup, например каждый контакт с именем и номером.

const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
  label: new FormControl(''),
  number: new FormControl('')
}));

Отображение элементов-групп

Используйте formGroupName с индексом каждой группы в массиве.

@for (g of contacts.controls; track $index) {
  <div [formGroupName]="$index">
    <input formControlName="label" />
    <input formControlName="number" />
  </div>
}

Чтение значения

Значение массива представляет собой обычный массив в текущем порядке элементов управления.

const list = this.phones.value; // string[]

Очистка массива

clear() одновременно удаляет все элементы управления — это удобно при сбросе динамического раздела.

this.phones.clear();

Быстрая проверка

Проверьте, насколько хорошо Вы поняли FormArray.

Повторение

Вы узнали, что FormArray управляет динамической упорядоченной коллекцией элементов управления или групп с помощью push, removeAt и clear. В шаблоне она отображается с помощью formArrayName и индексированных formControlName/formGroupName.

Часто задаваемые вопросы

Урок «FormArray и динамические поля» бесплатный?

Да — полный текст урока «FormArray и динамические поля» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «FormArray и динамические поля»?

Добавляйте и удаляйте элементы управления формой во время выполнения Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «FormArray и динамические поля»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типизированные реактивные формы
  2. FormArray и динамические поля
  3. Асинхронные валидаторы
  4. Шаблоны FormBuilder
← Назад к Angular Academy