Goodbye FormArray. Hello signal forms.

Description

We’re not just refactoring a form… we’re leaving an entire era behind. 👕 Built for Angular builders. Get some Shieldworks “United by Craft” gear → https://shop.briantree.se In this video, we take an existing dynamic form built with Angular Reactive Forms and migrate it to the new experimental Signal Forms API. You’ll see how to replace FormArray, FormControl, and validation logic using a signal-based data model and the new form() and applyEach() functions. We’ll walk through the before/after code step-by-step and update both the TypeScript and template so the end result behaves the same but with simpler, more expressive, and more reactive form state. If you’ve been curious about how Signal Forms really changes dynamic forms in Angular, this is the perfect example. ------------------------------------------------------------------------------ 🔔 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: - Before (https://stackblitz.com/edit/stackblitz-starters-xisxcmo9?file=src%2Fform%2Fform.component.ts) - After (https://stackblitz.com/edit/stackblitz-starters-twqpr3gc?file=src%2Fform%2Fform.component.ts) ------------------------------------------------------------------------------ 📚 Additional Resources: - Angular Signal Forms GitHub (Experimental): https://github.com/angular/angular/tree/main/packages/forms/signals - Angular FormArray Docs: https://angular.dev/api/forms/FormArray - 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:34 – Demo: Dynamic Form with Angular Reactive Forms 1:34 – How This Angular Reactive Form Works (Before the Upgrade) 3:36 – Meet Signal Forms: Angular’s Next-Gen Form API 4:03 – Step-by-Step: Convert Reactive Forms to Signal Forms 6:16 – Update the Template for Angular Signal Forms 7:34 – Testing the Upgraded Signal Form: Same UI, Smarter Code 8:48 – Recap and closing thoughts ------------------------------------------------------------------------------ 🧰 About the Tools Used This video uses Angular’s new Signal Forms module, which provides a signal-driven alternative to Reactive Forms. It includes the form() API, the Field directive, and validator helpers like required() and email(). This API is still experimental and not recommended for production yet, but it demonstrates how future Angular form handling can become simpler and more predictable. ------------------------------------------------------------------------------ #angular #angular21 #angularsignals #signalforms #webdevelopment #frontend #javascript #typescript #webdev #programming #softwareengineering