Перенесите ЛЮБУЮ форму в сигналы Angular (путь 2025 года)
Узнайте, как перенести реальную реактивную форму Angular в новую экспериментальную модель форм на основе сигналов в Angular v21+. 👕 Создано для разработчиков Angular. Приобретите футболку Shieldworks «United by Craft» → https://shop.briantree.se/products/sh...
Мы начнём с рабочей формы регистрации (обязательное имя, интеллектуальная валидация адреса электронной почты, отключенная кнопка «Отправить»), а затем проведём её пошаговый рефакторинг: заменим 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
