Handling Angular Forms Without Losing Your Sanity

on YouTube ↗48m

" summary

Compares template-driven vs reactive forms and shows concrete fixes: use FormBuilder, FormGroup/FormControl/FormArray for nested and dynamic fields, call setValidators + updateValueAndValidity when toggling required and use {emitEvent:false} on setValue/patchValue to avoid feedback loops. Demonstrates subscribing to valueChanges and using the async pipe, implements a typeahead by wrapping a third-party ngModel component with a control value accessor, uses markAllAsTouched (Angular 8) for submit handling, and ships a working Drag Race demo repo.

AI-written summary · about

" chapters (50)

1. 0:00Intro
2. 1:10About Me
3. 1:35Kansas City
4. 1:56Introduction
5. 2:26Angular Forms
6. 4:14Reactive Programming
7. 5:24Imperative vs Reactive Programming
8. 7:03Key Concepts
9. 8:24Operators
10. 8:59Demo
11. 10:16Reactive Forms
12. 13:15Form Control
13. 13:35Form Group
14. 14:11Form Control Name
15. 15:36Form Builder
16. 16:38Dynamic Required Fields
17. 18:09Demo Code
18. 18:25Demo App
19. 19:39Dry Race
20. 20:06Form Controls
21. 20:18Subscribe to Value Changes
22. 20:49Using the SetValidators method
23. 21:48Clearing out validators
24. 22:10Update Value Validity
25. 23:18Set Value Method
26. 24:20Validation
27. 25:17Handling Invalid Forms
28. 25:58Handling Touched Forms
29. 27:10Custom Validation Rules
30. 28:05Pattern Validation
31. 28:50Function Validation
32. 29:48Interface
33. 32:54Validation Logic
34. 33:22Example Problem
35. 33:43Index Bootstrap
36. 34:26Setup Code
37. 34:52Change Events
38. 35:24Template
39. 36:25Form
40. 38:45FormBuilder syntax
41. 40:12Insert method
42. 40:53Remove method
43. 41:11Form nest
44. 41:50Accessing multiple insert instances
45. 42:10Injecting the control container
46. 43:51tics tips and tricks
47. 44:56Initializing form controls
48. 45:11Summary
49. 46:00Demo Codes
50. 46:15Questions

" related talks

• 28mHandling Angular Forms Without Losing Your SanityJennifer Wadella · NG-DE Conference 2019
• 21mComparing Angular FormsAlex Lakatos · NG-MY 2019
• 43mAngular Reactive Forms - Developing Forms and Validation with AngularFabian Gosebrink · Voxxed Days Zürich 2022
• 35mLet's Build a Form Around ItSani Yusuf · ComponentsConf 2019
• 19mLightning Talks - Angular2+ Reactive FormsLyndsey Padget · NDC Minnesota 2018
• 46mAngular's Reactive FormsTodd Motto · NG-NL 2017
• 20mLet’s Build A Form Around ItSani Yusuf · NGConf 2018
• 47mReactive forms in AngularHardik Pithva · GDG DevFest Ahmedabad 2017