Перенесите ЛЮБУЮ форму в сигналы Angular (путь 2025 года)

Узнайте, как перенести реальную реактивную форму Angular в новую экспериментальную модель форм на основе сигналов в Angular v21+.

👕 Создано для разработчиков Angular. Поддержите канал, получите снаряжение Shieldworks «United by Craft» → https://shop.briantree.se

Мы начнём с рабочей формы регистрации (обязательное имя, интеллектуальная валидация адреса электронной почты, отключенная кнопка «Отправить»), а затем проведём её пошаговый рефакторинг: заменим FormGroup на сигнал данных, formControlName на директиву [control] и объявим валидаторы схемы со встроенными сообщениями. Вы увидите тот же пользовательский интерфейс с более чистым, по-настоящему реактивным кодом, а также практические объяснения того, когда и что делать с формами на основе сигналов. Идеально подходит для разработчиков, интересующихся формами на основе сигналов и реальными шаблонами миграции.

------------------------------------------------------------------------------

🔔 Подпишитесь, чтобы смотреть больше обучающих материалов и советов по Angular → [🔗 https://www.youtube.com/c/briantreese...]
👍 Поставьте лайк этому видео, если оно оказалось вам полезным — это очень поможет каналу!

------------------------------------------------------------------------------

🔗 Ссылки на демо-версии:
До (https://stackblitz.com/edit/stackblit...)
После (https://stackblitz.com/edit/stackblit...)

-----------------------------------------------------------------------------

📚 Дополнительные ресурсы:
Прототип форм на основе сигналов: https://github.com/angular/angular/tr...
Обзор сигналов Angular (официальный): https://angular.dev/guide/signals
Элиза Шнабель — «Angular Signal Forms: самая долгожданная функция уже здесь»:   / angular-signal-forms-the-most-awaited-feat...  
Мой курс «Angular: стилизация приложений»: https://www.pluralsight.com/courses/a...
Мой курс «Angular на практике: беззонное обнаружение изменений»: https://app.pluralsight.com/library/c...
Получите БЕСПЛАТНУЮ пробную версию Pluralsight ЗДЕСЬ!: https://www.jdoqocy.com/click-1015573...

------------------------------------------------------------------------------

📖 Главы:
0:00 – Введение
0:20 – Предварительный просмотр демоверсии: Поведение формы регистрации
1:23 – Настройка реактивных форм: TypeScript и шаблон
3:21 – Внимание: Сигнальные формы – экспериментальная разработка (Angular v21+)
3:56 – Пошаговая миграция: реактивные → сигнальные формы
4:38 – Сигнальные формы и реактивные формы: ключевые различия
5:16 – TypeScript: модель сигнала, form() и валидаторы
7:47 – Шаблон: директива [control] и ошибка
9:57 – Тестирование в реальном времени: валидация, ошибки и состояние кнопки
11:10 – Подведение итогов: выводы, подводные камни и дальнейшие шаги

-----------------------------------------------------------------------------

🧰 Об используемых инструментах
В этом видео используются экспериментальные сигнальные формы Angular v21+: Модель «данные-сигналы», обернутая в form() для состояния полей (invalid(), touched(), error()), директиву [control] для привязки входных данных и валидаторы схемы, такие как required() и email(), с сообщениями об ошибках. Окружение: современный Angular + StackBlitz для быстрой итерации. Сигнальные формы являются экспериментальными, API могут меняться, поэтому применяйте их в продакшене обдуманно.

------------------------------------------------------------------------------

#angular #angularsignals #signalforms #angular21 #angularforms #webdevelopment #frontend #typescript #reactiveforms