Формы с Angular Signals

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

Зачем Signal Forms?

Создание форм в веб-приложениях включает управление несколькими взаимосвязанными задачами: отслеживание значений полей, валидация ввода, обработка состояний ошибок и синхронизация UI с моделью данных. Управление этими задачами по отдельности создаёт шаблонный код и сложность.

Signal Forms решают эти задачи за счёт:

• Автоматической синхронизации состояния — автоматически синхронизируют модель данных формы с привязанными полями
• Типобезопасности — поддерживают полностью типобезопасные схемы и привязки между UI-контролами и моделью данных
• Централизации логики валидации — все правила валидации определяются в одном месте с помощью схемы валидации

Signal Forms лучше всего подходят для новых приложений, построенных на сигналах. Если вы работаете с существующим приложением на reactive forms или вам нужны гарантии production-стабильности, reactive forms остаются надёжным выбором.

Предварительные требования

Signal Forms требуют:

• Angular v21 или выше

Настройка

Signal Forms уже включены в пакет @angular/forms. Импортируйте необходимые функции и директивы из @angular/forms/signals:

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

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

@Component({
  // ...
  imports: [FormField],
})

Следующие шаги

Чтобы узнать больше о том, как работают Signal Forms, см. следующие руководства: