The Control Value Accessor
summary
Shows how implementing the ControlValueAccessor interface lets custom inputs plug directly into Reactive Forms so the form calls writeValue, registerOnChange, registerOnTouched, setDisabledState and UI updates follow. Builds a sample app: a type‑ahead that emits an ID and a star rating disabled until selection using a third‑party typeahead, with tests via a host component that assert patchValue initializes UI, clicks update form value, blur sets touched, and disable prevents interaction — it works as described.
AI-written summary · about
chapters (23)
- 0:00Intro
- 0:12What is a wormhole
- 0:36Problems with wormholes
- 0:53Control Value Accessor
- 2:54Reactive Forms
- 5:18Pitfalls
- 5:46Control Value Access
- 7:12Register on Change
- 8:16Blur
- 8:50DisabledState
- 9:14Diagram
- 9:30Implementation
- 11:20Typeahead
- 11:41Data Structure
- 11:54Markup
- 12:42Implement
- 14:15Rating
- 14:29WriteValue
- 15:12Disable
- 15:35Rating UI
- 16:00Testing
- 19:04Key Concepts
- 19:29Slides
related talks
47mAngular Forms
28mHandling Angular Forms Without Losing Your Sanity
17mIndiana Jones and the Hidden Secrets of the Forms API
26mReactive Forms Overview
24mReactive Powered: RxJS with Angular Forms
35mLet's Build a Form Around It
48mHandling Angular Forms Without Losing Your Sanity
31mLet's build a form around it