Build a Dynamic Form Builder with Angular Material, Drag & Drop & Code Export! (Part 2)

#angular #forms #builder

✨✨ Get the complete code for the Angular Forms Designer here:
https://zoaibkhan.com/shop/angular-forms-designer?utm_source=youtube&utm_medium=video&utm_campaign=forms-designer-tutorial

💡 Live Form Builder Link: https://forms-designer.vercel.app

Playlist for the Forms Designer Tutorial:
https://www.youtube.com/playlist?list=PLHbz-DWIAPJC1AQQcl_RMMDtDQXyxXPXe

📽️ My courses:
https://zoaibkhan.com/courses

✍️My blog for more free Angular posts:
https://zoaibkhan.com/blog

In Part 2 of this Angular 19 Form Builder series, we expand our form builder by adding essential features. We implement a preview mode, enable adding and deleting rows, and introduce dynamic field settings for customization. You'll learn to manage field properties and drag-and-drop fields between rows effectively.

Socials:
Twitter - https://twitter.com/zoaibdev
Facebook - https://www.facebook.com/thisiszoaib
LinkedIn - https://www.linkedin.com/in/zoaib-khan-b6456815/

Sections:
00:00 Introduction and Recap
01:02 Adding Preview Functionality
08:13 Implementing Row Management
13:41 Drag and Drop Enhancements
22:54 Fixing Drag and Drop Issues
26:25 Field Settings Configuration
27:09 Generating Dynamic Form Fields
27:51 Setting Up Field Types and Keys
28:12 Implementing Field Settings
29:34 Form Service and State Management
31:25 Adding Field Selection Functionality
31:45 Styling and Conditional Classes
33:17 Building Field Settings UI
34:08 Handling Field Settings Computation
35:30 Switch Case for Field Types
37:47 Updating Field Values
43:24 Adding New Field Types
46:05 Creating Dynamic Options Component
52:39 Testing and Final Adjustments
53:56 Conclusion and Next Steps

Видео Build a Dynamic Form Builder with Angular Material, Drag & Drop & Code Export! (Part 2) канала Zoaib Khan