What I’d do differently: Zod validation in Angular Signal Forms
I missed a built-in Angular API that completely simplified my Zod validation setup and this video fixes it.
👕 Built for Angular builders. Help support the channel, get some Shieldworks “United by Craft” gear → https://shop.briantree.se
In this follow-up tutorial, we refactor a real-world Angular Signal Forms example to simplify Zod schema validation using the built-in validateStandardSchema API. In a previous video ( • Zod + Angular signal forms… this actually ... ), we manually wired validation with validateTree, mapped Zod errors by hand, and handled success states ourselves. While that approach works, Angular already provides a cleaner, more scalable solution designed specifically for schema validators like Zod. In this video, you’ll see how to replace custom validation logic with validateStandardSchema, delete unnecessary code, and keep the exact same user experience. If you’re using Angular Signals, Signal Forms, or Zod for form validation, this video shows the best-practice approach going forward.
------------------------------------------------------------------------------
🔔 Subscribe for more Angular tutorials & tips → [🔗 https://www.youtube.com/c/briantreese...]
👍 Like this video if you found it helpful, it really helps support the channel!
------------------------------------------------------------------------------
🔗 Demo Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📚 Additional Resources:
Previous tutorial: Zod Validation with Angular Signal Forms: • Zod + Angular signal forms… this actually ...
Angular Signal Forms documentation: https://angular.dev/essentials/signal...
validateStandardSchema API Reference: https://angular.dev/api/forms/signals...
Zod documentation: https://zod.dev/
My course "Angular: Styling Applications": https://www.pluralsight.com/courses/a...
My course "Angular in Practice: Zoneless Change Detection": https://app.pluralsight.com/library/c...
Get a Pluralsight FREE TRIAL HERE!: https://www.jdoqocy.com/click-1015573...
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
0:48 – How Zod Validation Works in Angular Signal Forms (Before Refactor)
1:40 – Defining a Zod Validation Schema for Angular Signal Forms
2:52 – Manual Zod Validation Using validateTree (Why This Is Overkill)
4:06 – validateStandardSchema: Built-In Schema Validation for Angular Signal Forms
4:36 – Replacing validateTree with validateStandardSchema
5:30 – Removing Custom Zod Validation Code (Simplifying the Schema)
6:00 – Final Result: Clean Zod Validation with Signal Forms
6:30 – Best Practice for Zod Validation in Angular Signal Forms
------------------------------------------------------------------------------
🧰 About the Tools Used
This video focuses on Angular Signal Forms and schema-based form validation using Zod. We cover Angular’s validateStandardSchema API, which integrates directly with standard schema validators like Zod to handle validation, error mapping, and state updates automatically. The tutorial also touches on Angular Signals, the form() API, and why validateTree should be reserved for advanced or custom validation scenarios.
------------------------------------------------------------------------------
#angular #angularsignals #signalforms #zod #formvalidation #angularforms #typescript #webdevelopment #frontenddevelopment #validatestandardschema