Angular 22: Signal Forms стали стабильными — как работает поле телефона с маской и E.164

В Angular 22 Signal Forms вышли из статуса экспериментальных: контракт FormValueControl позволяет кастомным контролам отдавать форме значение и список ошибок, а поле телефона показывает, как развести отображаемый текст и хранимую модель.

Signal Forms вышли в стабильную версию

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

Суть контракта проста: любой нестандартный элемент ввода может стать частью формы, если умеет отдавать наружу значение и ошибки. По описанию, простой переключатель или степпер укладываются в этот контракт буквально в несколько строк. Основная сложность начинается там, где вводимый текст и значение модели — не одно и то же.

Почему поле телефона — настоящая проверка

Классический пример такого расхождения — поле для ввода номера телефона. Пользователь набирает цифры подряд, например 4155550132, при этом само поле показывает отформатированный вариант вида (415) 555-0132, а модель хранит уже нормализованное значение +14155550132.

Между этими тремя представлениями лежит целый слой логики: парсинг введённых символов, форматирование под конкретную страну и валидация. Контракт FormValueControl требует, чтобы контрол отдавал форме значение в формате E.164, а также типизированную ошибку в случае, если номер введён не полностью. Именно на таком примере удобно проверять, насколько хорошо новый механизм справляется с реальными задачами, а не с учебными сценариями.

Что это меняет для разработчиков

До сих пор кастомные контролы в Angular требовали заметного количества обвязки, чтобы корректно работать с формами: нужно было синхронизировать значение, статус валидности и ошибки. Контракт FormValueControl переносит эту ответственность на сам контрол и делает взаимодействие с формой более предсказуемым.

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

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

Итог

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