Динамические формы в Angular 19: пошаговое руководство

Формы — неотъемлемая часть большинства веб-приложений: будь то регистрация, ввод данных или опросы. Модуль реактивных форм в Angular отлично подходит для создания статичных форм, но во многих случаях требуется, чтобы форма могла динамически адаптироваться в зависимости от действий пользователя или внешних данных.

В этой статье мы рассмотрим, как создавать динамические формы с использованием автономных компонентов в Angular 19, применяя модульный подход, который избавляет от необходимости использовать традиционные модули Angular. В сопроводительном репозитории на GitHub для оформления форм используется Tailwind CSS, однако в статье внимание сосредоточено исключительно на логике динамических форм. Tailwind и связанные с ним настройки намеренно не включены в примеры, чтобы сохранить акцент на основной теме.

Что такое динамические формы?

Динамические формы позволяют задавать структуру формы — поля, валидаторы, расположение и прочее — во время выполнения, а не на этапе компиляции. Это особенно полезно в следующих ситуациях: — Многошаговые формы с ветками ответов; — Формы, создаваемые на основе ответа от API; — Формы, которые пользователь может настраивать сам — добавлять или удалять поля динамически.

Преимущества использования автономных компонентов

Автономные компоненты упрощают разработку на Angular, поскольку устраняют необходимость в NgModule. Зависимости компонента (например, реактивные формы или маршруты) можно подключать непосредственно внутри самого компонента, что даёт следующие плюсы: — Меньше шаблонного кода; — Лучшая модульность; — Более быстрая разработка.

Для работы с такими формами удобно использовать FormArray и FormGroup из Angular — они дают гибкость при добавлении, удалении и изменении контролов в форме.

Пошаговое руководство по созданию динамических форм

1. Установка Angular и создание нового проекта

Прежде чем перейти к продвинутым примерам, начнём с создания нового приложения.

Для начала установите Angular CLI:

npm install @angular/cli

Теперь создайте новое Angular-приложение. В качестве формата стилей можно выбрать SCSS, а для SSR — указать «Нет»:

ng new dynamic-forms-sample-app

2. Создание динамической формы

Чтобы создать форму динамически, мы используем FormGroup и FormArray из модуля реактивных форм в Angular.

Вот полная реализация:

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

@Component({
  selector: "app-root",
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  dynamicForm: FormGroup; // Main form group

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      name: [""], // Simple input field
      email: [""], // Another input field
      fields: this.fb.array([]), // Dynamic fields will be stored here
    });
  }

  // Getter to access the FormArray for dynamic fields
  get fields(): FormArray {
    return this.dynamicForm.get("fields") as FormArray;
  }

  /**
   * Adds a new field to the dynamic form.
   */
  addField() {
    const fieldGroup = this.fb.group({
      label: [""], // Label for the field
      value: [""], // Value of the field
    });
    this.fields.push(fieldGroup);
  }

  /**
   * Removes a field from the dynamic form at a specific index.
   * @param index Index of the field to be removed.
   */
  removeField(index: number) {
    this.fields.removeAt(index);
  }

  /**
   * Submits the form and logs its current value to the console.
   */
  submitForm() {
    console.log(this.dynamicForm.value);
  }
}

Объяснение методов

addField(). Этот метод создаёт новую группу формы с двумя контролами: label и value. Новая группа добавляется в массив fields. Это позволяет пользователю добавлять поля в форму динамически.

removeField(index: number). Этот метод удаляет группу формы из массива fields по указанному индексу. Полезно, когда пользователь хочет удалить больше не нужное поле.

submitForm(). Метод собирает текущее состояние формы и выводит его в консоль. В реальном приложении данные можно было бы отправить на сервер или использовать для обновления интерфейса.

Шаблон компонента

Откройте файл app.component.html, удалите всё содержимое и добавьте следующий шаблон. В нём динамически отображаются элементы управления формой, а также предусмотрены кнопки для добавления и удаления полей:

<form [formGroup]="dynamicForm" (ngSubmit)="submitForm()">
  <div>
    <label>Name:</label>
    <input formControlName="name" />
  </div>

  <div>
    <label>Email:</label>
    <input formControlName="email" />
  </div>

  <div formArrayName="fields">
    @for(field of fields.controls; let i = $index; track field) {
      <div [formGroupName]="i">
        <label>
          Label:
          <input formControlName="label" />
        </label>
        <label>
          Value:
          <input formControlName="value" />
        </label>
        <button type="button" (click)="removeField(i)">Remove</button>
      </div>
    }
  </div>

  <button type="button" (click)="addField()">Add Field</button>
  <button type="submit">Submit</button>
</form>

Разбор шаблона

Статичные поля (Name и Email). Эти поля отображаются всегда и используют formControlName для привязки к форме.

Динамические поля (fields). Директива *ngFor перебирает FormArray и отображает каждое динамическое поле. У каждого поля есть привязки formControlName для label и value.

Кнопки. Кнопка Add Field вызывает метод addField() для добавления нового динамического поля. Каждое динамическое поле содержит кнопку Remove, которая вызывает removeField().

Создание динамической формы на основе данных из API

Во многих приложениях структура формы поступает из внешнего источника — например, из конфигурации, хранящейся на сервере. Получение конфигурации формы

Предположим, что API возвращает следующий JSON:

{
  "fields": [
    { "label": "Username", "type": "text", "required": true },
    { "label": "Age", "type": "number", "required": false },
    {
      "label": "Gender",
      "type": "select",
      "options": ["Male", "Female"],
      "required": true
    }
  ]
}

Вот как сгенерировать форму динамически на основе этой конфигурации:

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

@Component({
  selector: "app-dynamic-api-form",
  templateUrl: "./dynamic-api-form.component.html",
})
export class DynamicApiFormComponent implements OnInit {
  dynamicForm!: FormGroup; // The main reactive form instance
  formConfig: any; // The configuration object fetched from the API

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.fetchFormConfig().then((config) => {
      this.formConfig = config;
      this.buildForm(config.fields); // Build the form based on the configuration
    });
  }

  /**
   * Simulates fetching form configuration from an API.
   * In a real application, this would be an HTTP request.
   */
  async fetchFormConfig() {
    // Simulate API call
    return {
      fields: [
        { label: "Username", type: "text", required: true },
        { label: "Age", type: "number", required: false },
        {
          label: "Gender",
          type: "select",
          options: ["Male", "Female"],
          required: true,
        },
      ],
    };
  }

  /**
   * Dynamically creates the form controls based on the fetched configuration.
   */
  buildForm(fields: any[]) {
    const controls: any = {};
    fields.forEach((field) => {
      const validators = field.required ? [Validators.required] : [];
      controls[field.label] = ["", validators];
    });
    this.dynamicForm = this.fb.group(controls);
  }

  /**
   * Handles form submission, logging the form value to the console.
   */
  submitForm() {
    console.log(this.dynamicForm.value);
  }
}

dynamicForm хранит основной экземпляр FormGroup для реактивной формы. Формируется динамически на основе ответа от API.

formConfig содержит объект конфигурации, полученный от API. Определяет поля, их типы, правила валидации и (при необходимости) список опций.

ngOnInit(). Жизненный цикл компонента, который запускается после его инициализации. Вызывает fetchFormConfig() для получения конфигурации формы и её настройки.

fetchFormConfig(). Эмулирует вызов API для получения конфигурации формы. В реальном проекте этот мок следует заменить настоящим HTTP-запросом.

   {
     fields: [
       { label: "Name", type: "text", required: true },
       { label: "Age", type: "number", required: true },
       {
         label: "Gender",
         type: "select",
         required: true,
         options: ["Male", "Female", "Other"],
       },
     ];
   }

buildForm() динамически создаёт FormGroup на основе полученной конфигурации. Для каждого поля в конфигурации добавляет FormControl в FormGroup и назначает валидаторы (например, Validators.required), если поле отмечено как обязательное.

   {
     Name: ['', [Validators.required]],
     Age: ['', [Validators.required]],
     Gender: ['', [Validators.required]]
   }

submitForm() вызывается при отправке формы пользователем. Если форма валидна — выводит значения формы в консоль. Если форма невалидна — выводит сообщение об ошибке.

 {
     Name: 'John Doe',
     Age: 30,
     Gender: 'Male'
   }

Как всё это работает вместе

Инициализация

Когда компонент загружается, ngOnInit() вызывает fetchFormConfig(), чтобы смоделировать получение структуры формы.

Формирование формы

Метод buildForm() использует полученную конфигурацию и динамически создаёт реактивную форму.

Взаимодействие с пользователем

Форма отображается в шаблоне HTML. Пользователь может вводить значения или выбирать опции — в зависимости от типа каждого поля.

Валидация

Элементы формы соблюдают правила валидации (например, обязательные поля). Невалидные поля отображают сообщения об ошибке при взаимодействии с ними.

Отправка формы

При отправке submitForm() проверяет, валидна ли форма, и обрабатывает значения формы соответствующим образом.

Такой разбор помогает чётко понять назначение и работу каждого метода и свойства в TypeScript-коде.

@if(dynamicForm) {
  <form [formGroup]="dynamicForm" (ngSubmit)="submitForm()">
    @for(field of formConfig.fields; track field) {

      <label>{{ field.label }}</label>
      @switch(field.type) { 
        @case('text') {
          <input [formControlName]="field.label" />
        } 
        @case('number') {
          <input
            [formControlName]="field.label"
            type="number"
          />
        } 
        @case('select') {
          <select [formControlName]="field.label">
            @for(option of field.options; track option) {
              <option [value]="option">
                {{ option }}
              </option>
            }
          </select>
        } 
      } 
    }
    <button type="submit">Submit</button>
  </form>
}

Разбор HTML-структуры @if(dynamicForm) обеспечивает отображение формы только после её инициализации и получения конфигурации.

@for(field of formConfig.fields; track field) перебирает массив fields из конфигурации и динамически отображает элементы управления формой.

@switch(field.type) выбирает тип элемента формы для отображения в зависимости от значения type в конфигурации поля (например, text, number или select).

Типы полей ввода: — Текстовые поля (@case ('text')). Отображает элемент для ввода текста. — Числовые поля (@case ('number')). Отображает элемент <input type="number"> для ввода чисел. — Выпадающие списки (@case ('select').Отображает элемент <select>, динамически заполняя его опциями из массива options в конфигурации поля.

Динамическая установка валидаторов

Вы также можете изменять валидаторы на лету, в зависимости от ввода пользователя или определённых условий.

onRoleChange(role: string) {
  const emailControl = this.dynamicForm.get('email');
  if (role === 'admin') {
    emailControl?.setValidators([Validators.required, Validators.email]);
  } else {
    emailControl?.clearValidators();
  }
  emailControl?.updateValueAndValidity();
}

Заключение

Динамические формы в Angular — это гибкий способ создания интерактивных и масштабируемых пользовательских интерфейсов. Используя FormArray, FormGroup и конфигурации, полученные через API, вы можете создавать формы, которые адаптируются под нужды пользователя, сохраняя при этом надёжность и высокую производительность.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.