How to use Zod with Angular signal forms (step-by-step migration)

Bring Zod validation to Angular Signal Forms step by step.

👕 Built for Angular builders. Help support the channel, get some Shieldworks “United by Craft” gear → https://shop.briantree.se

If you’ve been wondering how to combine Angular Signal Forms with Zod validation, this step-by-step tutorial walks you through a real Reactive Forms migration to the new Signal Forms API in Angular 21. We’ll start with a working example using traditional Angular forms, then reconnect the validation using a clean, modern pattern that keeps all of your TypeScript validation logic inside a Zod schema. You’ll learn how Zod integrates with Angular form validation and how to translate Zod errors into Signal Forms.

By the end, you’ll have a fully working setup that shows exactly how to wire Zod Angular validation into Signal Forms validation: no FormGroup, no duplicated rules, and a much cleaner architecture for modern Angular forms. Whether you're modernizing an existing app or learning the new Angular form APIs, this walkthrough gives you the practical patterns you can play with today.

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

🔔 Subscribe for more Angular tutorials & tips → [🔗 https://www.youtube.com/c/briantreese?sub_confirmation=1]
👍 Like this video if you found it helpful, it really helps support the channel!

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

🔗 Demo Links:
- Reactive Forms Before (https://stackblitz.com/edit/stackblitz-starters-sckupnkn?file=src%2Fform%2Fform.component.ts)
- Signal Forms Before (https://stackblitz.com/edit/stackblitz-starters-kpfdyneu?file=src%2Fform%2Fform.component.ts)
- Signa Forms After (https://stackblitz.com/edit/stackblitz-starters-ffxx74he?file=src%2Fform%2Fform.component.ts)

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

📚 Additional Resources:
- Angular Signal Forms documentation: https://angular.dev/essentials/signal-forms
- Signal Forms Validation API: https://angular.dev/guide/forms/signals/validation
- Zod documentation: https://zod.dev/
- My course "Angular: Styling Applications": https://www.pluralsight.com/courses/angular-styling-applications
- My course "Angular in Practice: Zoneless Change Detection": https://app.pluralsight.com/library/courses/angular-practice-zoneless-change-detection
- Get a Pluralsight FREE TRIAL HERE!: https://www.jdoqocy.com/click-101557355-17135603

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

📖 Chapters:
0:00 – Introduction
0:45 – Reactive Forms + Zod Validation (Current Working State)
1:23 – What Is Zod? Why Angular Developers Use It for Validation
1:55 – Understanding the Zod Schema for Angular Form Validation
3:10 – How Zod Is Wired into Angular Reactive Forms (Before Migration)
4:16 – Reactive Forms + Zod Validation Logic in TypeScript
5:16 – Migrated to Signal Forms - Zod Validation Is Now Broken
6:07 – Angular Signal Forms Template Breakdown (field Directive)
6:53 – Angular Signal Forms Logic Breakdown (Model + submit())
7:37 – How to Wire Zod into Angular Signal Forms with validateTree
10:48 – Final Test: Zod Validation Working with Angular Signal Forms
11:39 – Final Thoughts: Zod + Angular Signal Forms Without FormGroup

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

🧰 About the Tools Used
This video uses Angular 21, the new Signal Forms API, and Zod, a TypeScript-first schema validator used for clean, runtime-safe form validation. Signal Forms replaces FormGroup with reactive field trees powered by signals, while Zod provides highly descriptive validation messages without duplicating logic. By combining the two, you get a fully reactive form experience with a single source of truth and schema-driven validation.

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

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

Видео How to use Zod with Angular signal forms (step-by-step migration) канала Brian Treese