### Новые реактивные формы в Angular: Signal Forms API

В Angular 21 представлен экспериментальный Signal Forms API, призванный значительно упростить создание реактивных форм за счет использования сигналов. Это эволюционный шаг по сравнению с классическими Reactive Forms, предлагающий автоматическую реактивность, полную типизацию и сокращение шаблонного кода. Для создания формы достаточно определить модель данных как сигнал и передать его в функцию form из @angular/forms/signals. Например, вот как можно инициализировать форму пользователя:

import { form } from '@angular/forms/signals';

// ...
user = signal<User>({ name: '', surname: '', email: '' });
signupForm = form(this.user);

Все поля формы представлены интерфейсом FieldState, где каждое свойство (значение, состояние, валидация) само является сигналом, обеспечивая двустороннее связывание данных с UI через директиву [formField].

Валидация формы настраивается декларативно во втором аргументе функции form с помощью встроенных правил, таких как required или pattern. Условные правила валидации легко реализуются с помощью параметра when и FieldContext, позволяющего получить доступ к значениям других полей. Пример добавления обязательного поля с сообщением об ошибке:

import { required } from '@angular/forms/signals';

// ...
signupForm = form(this.user, (path) => {
   required(path.name, { message: 'Это поле обязательно' });
});

Для сложной логики предусмотрены функции validate (для одного поля) и validateTree (для нескольких полей), поддерживающие кастомные ошибки с сообщениями. Правила валидации и сообщения об ошибках можно вынести в переиспользуемую схему с помощью функции schema.

Signal Forms API также предоставляет различные состояния формы: валидационные (valid, invalid), интерактивные (touched, dirty) и доступности (disabled, hidden, readonly), все они представлены сигналами. В отличие от предыдущих версий, отключенные поля формы теперь всегда включаются в общее значение. Состояния доступности, такие как hidden, могут быть декларативно определены в схеме, позволяя динамически управлять видимостью полей без участия в валидации.

Отправка формы осуществляется функцией submit, которая принимает саму форму и асинхронную логику, выполняющуюся только при валидной форме. В процессе отправки можно отслеживать состояние submitting() и обрабатывать ошибки, привязывая их к конкретным полям для отображения в UI. Создание кастомных контролов значительно упрощено: достаточно реализовать интерфейс FormValueControl (или FormCheckboxControl) с модельным сигналом value и связать его с родительской формой через [formField]. Этот подход делает разработку форм более интуитивной, типобезопасной и производительной, подготавливая разработчиков к будущему Angular.

Оригинал статьи: Новые реактивные формы в Angular: Signal Forms API