What you'll learn:
- Build production-ready Angular applications using the new Signal Forms API
- Master form validation, including custom, async, cross-field and conditional validation
- Build reusable custom form controls, nested forms and dynamic form arrays
- Implement file uploads with progress indicators and live image previews
- Build complex multi-step forms with draft auto-save and unsaved changes protection
- Initialize forms from backend data and Angular input signals using linkedSignal
- Integrate Zod and Standard Schema for strongly typed form validation
- Get full source code with a GitHub repository and downloadable ZIP files for every section
This course is a complete guide to building complex, production-ready forms with the Angular Signal Forms API. It comes with a running GitHub repo.
This Course In a Nutshell
Angular Signal Forms is a ground-up redesign of the Angular Forms module, built entirely around signals. It replaces Observables and FormControl with a reactive, model-driven approach that is simpler to learn, easier to type, and far less boilerplate-heavy than both reactive and template-driven forms.
This course teaches Signal Forms from the ground up by building a sample application with login, profile, file upload, nested forms, multi-step forms, form arrays and more.
Every form pattern you'll encounter in a production application is covered, including async server validation, conditional fields, reusable custom controls, and multi-step wizards.
Course Overview
We start with a simple login form to introduce the core Signal Forms API and field state signals. We cover built-in validators, custom validation rules, and how to display error messages cleanly using a reusable error component.
We then build a profile form to explore field availability (readonly, dirty, reset) and introduce route guards that prevent accidental navigation away from unsaved changes.
Next, we go deep on custom form controls. We build a reusable address sub-form, and then a fully custom file upload control with a real HTTP upload, a progress bar, and a live image preview — all wired into the form system with no special handling required in the parent.
We cover the unique challenge of initializing a form from an Angular input signal, and why a plain signal is not enough here.
Async validation gets a dedicated section: we implement server-side field validation, add debouncing to reduce unnecessary API calls, and display a pending spinner while the server responds.
We then build a multi-step course creation wizard covering conditional fields, cross-field validation, dynamic lesson arrays, and multi-form coordination with a draft pre-save mechanism.
Table of Contents
This course covers the following topics:
Introduction — overview, why Signal Forms, setup
Form Model Design — designing the form model, form vs domain model, avoiding common pitfalls
Your First Form — form model, field binding, validation schema, error messages, form submission
Schema Libraries — integrating Zod and custom validation schemas via Standard Schema
Field State — read-only fields, unsaved changes, reset, navigation guard
Nested Custom Controls — reusable sub-forms as custom controls
File Upload Control — custom file upload with progress indicator and live preview
Forms from Inputs — initializing a form from a parent component input
Async Validation — loading remote data, server-side validation, debouncing
Conditional Forms — conditional fields, conditional schemas, cross-field validation
Form Arrays — dynamic lists with per-item validation schemas
Multi-Step Forms — coordinating multiple forms, final submission
Draft Pre-Saving — auto-saving form state, restoring a draft on page load
What Will You Learn In This Course?
By the end of this course you will be able to:
Build any type of form using Angular Signal Forms from scratch
Apply built-in and custom validators, including async server-side validation
Build reusable custom form controls that integrate seamlessly with the form system
Handle conditional fields, cross-field validation, and dynamic arrays
Integrate external schema libraries like Zod via validateStandardSchema
Implement production patterns: unsaved-changes guards, draft pre-saving, multi-step wizards, and file upload with progress
Please enjoy the course!
