Extreme reactive forms in Angular

on YouTube ↗31m

" summary

Live demo of a theater-seat picker built with Angular Reactive Forms and RxJS that keeps form state in sync with route params and a real-time seat feed (WebSocket or polling). Uses nested FormArrays, a ControlValueAccessor seat component, async validator that switchMap to seat-check API to reject already-occupied seats, and programmatic disable/enable with emitEvent:false to avoid spurious value-change counts. Error messages stream via a Subject, seat count uses scan, and occupied/released updates apply without rebuilding the form.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 0:37About me
3. 1:07Demo
4. 2:50Architecture
5. 3:59Why form
6. 5:02Reactive programming
7. 8:27Use case
8. 9:19Form implementation
9. 11:16Form construction
10. 15:15Disable seat
11. 17:54Set or patch value
12. 20:06Validation
13. 26:21Errors
14. 28:56Count

" related talks

• 50mReactive Powered: RxJS with Angular FormsShmuela Jacobs · YGLF 2019: Code Camp
• 43mReactive Powered: RxJS with Angular FormsShmuela Jacobs · JavaScript fwdays'19
• 34mForm of Art.Shmuela Jacobs · NG-BE 2018
• 24mReactive Powered: RxJS with Angular FormsShmuela Jacobs · NG Poland 2019
• 48mHandling Angular Forms Without Losing Your SanityJennifer Wadella · NDC Sydney 2019
• 31mEnterprise Grade Angular Reactive FormsJuri Strumpflohner · NG-BE 2019
• 45mReactive Frontends with RxJS and AngularSergi Almar · Voxxed Days Singapore 2018
• 35mLet's Build a Form Around ItSani Yusuf · ComponentsConf 2019