Handling Angular Forms Without Losing Your Sanity
summary
Compares template‑driven vs reactive forms and shows concrete fixes: use FormControl/FormGroup/FormArray and FormBuilder; subscribe to valueChanges to make a subcategory dynamically required, call setValidators and updateValueAndValidity, and validate “at least two” items with a custom validator. Demonstrates formArray.insert/remove for dynamic ingredients, and builds a star‑rating/typeahead component wired to the form via ControlValueAccessor: writeValue / registerOnChange / registerOnTouched (optional setDisabledState) so the component submits an ID while displaying readable text.
AI-written summary · about
chapters (19)
- 0:00Intro
- 1:06Who is Laura Wang
- 1:52Reactive Forms
- 9:18Dynamic Required Fields
- 14:32Pattern Validation
- 16:22Dynamic Form Controls
- 17:02Form Array
- 17:22Form Array Methods
- 17:57Form Array Example
- 18:41Remove Form Control
- 19:48Example
- 21:00ControlValueAccess
- 21:42Create New Component
- 22:05Star Markup
- 22:32Implementing Methods
- 23:27Set Disabled State
- 23:52Set Rating
- 24:38Recap
- 27:12Questions
related talks
48mHandling Angular Forms Without Losing Your Sanity
43mAngular Reactive Forms - Developing Forms and Validation with Angular
21mComparing Angular Forms
35mLet's Build a Form Around It
20mLet’s Build A Form Around It
46mAngular's Reactive Forms
19mLightning Talks - Angular2+ Reactive Forms
26mReactive Forms Overview