The Control Container and I

on YouTube ↗16m

" summary

A multi-step Angular loan form for an Animal Crossing demo runs into "formControlName must be used with a parent form group" when splitting steps across routes and nested components and the fix is to surface the parent form group via ControlContainer either by adding it to child viewProviders with useExisting: FormGroupDirective or by providing it on the parent and injecting the container in children to call controlContainer.control.get('field').valid so navigation disables until validity is satisfied.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and use case
2. 2:52Implementing multi-step forms
3. 6:23The problem with nested forms
4. 7:50Using ControlContainer
5. 10:44Programmatic form control
6. 14:12Conclusion and resources

" related talks

• 19mSimplifying deep angular forms with di equipped custom componentsRafael Mestre · ng-conf 2022
• 35mLet's Build a Form Around ItSani Yusuf · ComponentsConf 2019
• 28mHandling Angular Forms Without Losing Your SanityJennifer Wadella · NG-DE Conference 2019
• 47mAngular FormsKara Erickson · AngularConnect 2017
• 17mIndiana Jones and the Hidden Secrets of the Forms APIJennifer Wadella · AngularUP Experience 2020
• 48mHandling Angular Forms Without Losing Your SanityJennifer Wadella · NDC Sydney 2019
• 20mLet’s Build A Form Around ItSani Yusuf · NGConf 2018
• 35mIndiana Jones and the Hidden Secrets of the Forms APIJennifer Wadella · DevReach 2023