Angular — это мощный фреймворк для создания веб-приложений, который позволяет создавать как статические, так и динамические формы. В этой статье мы рассмотрим, как создать динамическую форму в Angular, используя возможности Reactive Forms.

Для начала, давайте разберем, что такое Reactive Forms в Angular. Это один из способов создания форм, который обеспечивает более высокий уровень контроля и гибкости, чем Template-driven Forms. Reactive Forms позволяют управлять состоянием формы и валидацией программно.

Шаг 1: Установка Angular

Если у вас еще не установлен Angular, вы можете создать новый проект с помощью Angular CLI. Для этого выполните в командной строке следующее:

ng new dynamic-forms-demo

После создания проекта перейдите в его директорию:

cd dynamic-forms-demo

Шаг 2: Установка Reactive Forms

Убедитесь, что Reactive Forms модуль импортирован в вашем AppModule. Для этого откройте файл app.module.ts и добавьте следующий импорт:

import { ReactiveFormsModule } from '@angular/forms';

После этого добавьте ReactiveFormsModule в массив imports:

imports: [
  BrowserModule,
  ReactiveFormsModule
]

Шаг 3: Создание компонента

Теперь создадим компонент, который будет содержать нашу динамическую форму. Выполните команду:

ng generate component dynamic-form

После этого откройте созданный компонент dynamic-form.component.ts и добавьте следующий код:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      items: this.fb.array([])
    });
  }

  ngOnInit() {
    this.addItem(); // Добавляем первый элемент сразу же
  }

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

  addItem() {
    const item = this.fb.group({
      name: ['', Validators.required],
      description: ['', Validators.required]
    });
    this.items.push(item);
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Шаг 4: HTML-разметка формы

Теперь откроем файл dynamic-form.component.html и добавим разметку для нашей формы:

<form [formGroup]='myForm' (ngSubmit)='onSubmit()'>
  <div formArrayName='items'>
    <div *ngFor='let item of items.controls; let i = index' [formGroupName]='i'>
      <label>Имя:</label>
      <input formControlName='name' />
      <label>Описание:</label>
      <input formControlName='description' />
      <button type='button' (click)='addItem()'>Добавить элемент</button>
    </div>
  </div>
  <button type='submit'>Отправить</button>
</form>

Шаг 5: Стилизация формы

Чтобы улучшить внешний вид нашей формы, вы можете добавить стили в файл dynamic-form.component.css:

input {
  display: block;
  margin-bottom: 10px;
}

Шаг 6: Запуск приложения

Теперь вы можете запустить ваше приложение с помощью команды:

ng serve

Перейдите по адресу http://localhost:4200, и вы увидите вашу динамическую форму!

Заключение

В этой статье мы рассмотрели, как создать динамическую форму в Angular с использованием Reactive Forms. Мы создали компонент, добавили элементы в форму динамически, а также обработали отправку формы. Вы можете улучшить и расширить эту реализацию, добавив больше элементов формы, валидацию и другие функции.