Как использовать Zod с формами сигналов Angular (пошаговая миграция)

Пошаговое внедрение валидации Zod в Angular Signal Forms.

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

Если вас интересовало, как объединить Angular Signal Forms с валидацией Zod, это пошаговое руководство проведет вас через реальную миграцию реактивных форм на новый API Signal Forms в Angular 21. Мы начнем с рабочего примера с использованием традиционных форм Angular, а затем восстановим валидацию, используя чистый, современный шаблон, который сохраняет всю вашу логику валидации TypeScript внутри схемы Zod. Вы узнаете, как Zod интегрируется с валидацией форм Angular и как преобразовывать ошибки Zod в Signal Forms.

В итоге у вас будет полностью рабочая конфигурация, которая точно покажет, как интегрировать валидацию Zod Angular с валидацией Signal Forms: никаких FormGroup, никаких дублирующихся правил и гораздо более чистая архитектура для современных форм Angular. Независимо от того, модернизируете ли вы существующее приложение или изучаете новые API форм Angular, это пошаговое руководство предоставит вам практические шаблоны, которые вы можете использовать уже сегодня.

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

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

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

🔗 Ссылки на демо-версии:
Реактивные формы до (https://stackblitz.com/edit/stackblit...)
Формы Signal до (https://stackblitz.com/edit/stackblit...)
Формы Signal после (https://stackblitz.com/edit/stackblit...)

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

📚 Дополнительные ресурсы:
Документация Angular Signal Forms: https://angular.dev/essentials/signal...
Документация Zod: https://zod.dev/
Мой курс "Angular: стилизация приложений": https://www.pluralsight.com/courses/a...
Мой курс "Angular на практике: обнаружение изменений без зоны": https://app.pluralsight.com/library/c...
Получите БЕСПЛАТНУЮ ПРОБНУЮ ВЕРСИЮ Pluralsight ЗДЕСЬ!: https://www.jdoqocy.com/click-1015573...

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

📖 Разделы:
0:00 – Введение
0:45 – Реактивные формы + валидация Zod (текущее рабочее состояние)
1:23 – Что такое Zod? Почему разработчики Angular используют Zod для валидации
1:55 – Понимание схемы Zod для валидации форм Angular
3:10 – Как Zod интегрирован в реактивные формы Angular (до миграции)
4:16 – Логика валидации Zod в реактивных формах на TypeScript
5:16 – Миграция на Signal Forms - валидация Zod теперь не работает
6:07 – Разбор шаблона Angular Signal Forms (директива field)
6:53 – Разбор логики Angular Signal Forms (Model + submit())
7:37 – Как интегрировать Zod в Angular Signal Forms с помощью validateTree
10:48 – Финальный тест: работа валидации Zod с Angular Signal Forms
11:39 – Заключительные мысли: Zod + Angular Signal Forms без FormGroup

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

🧰 Об используемых инструментах
В этом видео используется Angular 21, новый API Signal Forms и Zod, валидатор схем, ориентированный на TypeScript, для чистой и безопасной во время выполнения проверки форм. Signal Forms заменяет FormGroup реактивными деревьями полей, работающими на основе сигналов, а Zod предоставляет очень подробные сообщения об ошибках проверки без дублирования логики. Объединив эти два инструмента, вы получаете полностью реактивную форму с единым источником достоверной информации и проверкой на основе схемы.

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

#angular #angular21 #angularsignals #signalforms #zod #zodvalidation #angularforms #webdevelopment #typescript #frontenddevelopment