Перейти к содержанию

Формы на сигналах Angular

📅 30.09.2026

Сигнальные формы — библиотека для управления состоянием формы в приложениях Angular. Она опирается на реактивную основу сигналов. Автоматическая двусторонняя привязка, типобезопасный доступ к полям и проверка по схеме помогают собирать надёжные формы.

Краткое введение в сигнальные формы — в руководстве по основам сигнальных форм.

Зачем сигнальные формы?

Формы в веб-приложениях собирают несколько связанных задач: хранить значения полей, проверять ввод, обрабатывать состояния ошибок и держать интерфейс в согласии с моделью данных. Если вести это по отдельности, появляется шаблонный код и лишняя сложность.

Сигнальные формы закрывают эти задачи так:

  • Состояние синхронизируется само — модель данных формы автоматически сходится с привязанными полями
  • Есть типобезопасность — схемы и привязки между элементами интерфейса и моделью данных полностью типобезопасны
  • Логика проверки собрана в одном месте — все правила задаются в схеме проверки

Сигнальные формы лучше всего раскрываются в новых приложениях на сигналах. Если приложение уже на реактивных формах или нужны гарантии стабильности в продакшене, реактивные формы остаются надёжным выбором.

Если вы пришли из шаблонных или реактивных форм, пригодится руководство по сравнению.

Что нужно заранее

Для сигнальных форм нужно:

  • Angular v21 или новее

Настройка

Сигнальные формы уже входят в пакет @angular/forms. Нужные функции и директивы импортируются из @angular/forms/signals:

1
import {form, FormField, required, email} from '@angular/forms/signals';

Директиву FormField нужно импортировать в каждый компонент, который привязывает поля формы к HTML-полям ввода:

1
2
3
4
@Component({
  // ...
  imports: [FormField],
})

Что дальше

Как устроены сигнальные формы — в следующих руководствах:

Источник: https://angular.dev/guide/forms/signals/overview

Комментарии