Reactive Powered: RxJS with Angular Forms

on YouTube ↗50m

" summary

A live theater seat picker demo shows a concrete claim: Reactive Forms plus RxJS handle async seat-occupancy updates, validation and UI state. Code uses Angular Reactive Forms, Observables from router and HTTP, a custom ControlValueAccessor seat control, async validator wired through switchMap, BehaviorSubject to show an error for five seconds, and scan to maintain a selected-seat count. Examples include disabling/enabling controls without emitting and unselecting conflicted seats.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 2:59SERVER-CLIENT ARCHITECTURE
3. 4:39WHY FORM?
4. 6:49REACTIVE FORMS
5. 13:03FETCHING AND SETTING INITIAL VALUE
6. 17:02FETCHING AND PATCHING INITIAL VALUE
7. 19:27CREATING THE FORM
8. 23:01DISABLED IF OCCUPIED
9. 27:14DISABLE WITH SET VALUE / PATCH VALUE?
10. 32:14ASYNC VALIDATION
11. 38:29SHOW ERROR MESSAGE + UNSELECT
12. 45:01SELECTED SEATS COUNT
13. 47:09A NOTE ABOUT
14. 48:08SUMMARY

" related talks

• 43mReactive Powered: RxJS with Angular FormsShmuela Jacobs · JavaScript fwdays'19
• 31mExtreme reactive forms in AngularShmuela Jacobs · FrontEnd Con 2018
• 24mReactive Powered: RxJS with Angular FormsShmuela Jacobs · NG Poland 2019
• 34mForm of Art.Shmuela Jacobs · NG-BE 2018
• 45mReactive Frontends with RxJS and AngularSergi Almar · Voxxed Days Singapore 2018
• 01h 07mReactive Frontends with RxJS and Angular - Sergi AlmarSergi Almar · SpringOne Platform 2017
• 31mEnterprise Grade Angular Reactive FormsJuri Strumpflohner · NG-BE 2019
• 51mReactive programming in AngularYakov Fain · Devoxx US 2017