The ControlContainer & I ( ...and Tom Nook)
Jennifer Wadella
Jennifer Wadella
@likeOMGitsFEDAY
- Lead Angular Consultant at Bitovi
- Expert Tarantula Catcher
- Fermentista
Nook Needs a Favor ...
Island Point of Sale System
Demo App:
Requirements
- Show outstanding loans
- Create new loans
- Simple interface
"How about a multi-step loan application for simplicity?"
First Page
- first name, last name, friend code, address
Second Page
- loan type & roof color
Third Page
- deposit + display remaining amount due
Repeat address fields?
Yikes!
"formControlName must be used with a parent formGroup directive."
FormGroup
^
👀
FormControlName
How do We Access Our FormGroup?
Angular's ControlContainer
A base class for directives that contain multiple registered instances of NgControl. Only used by the forms module.
A base class for directives that contain multiple registered instances of NgControl. Only used by the forms module.
tl;dr
Helps us get a reference to our FormGroupDirective from a child component.
We make our ControlContainer provider available to our components in a few different ways
Option 1: Inject via ViewProviders in Child Components
Yay, no errors!
Option 2: Inject via Provider in Parent Component
What if we need to access formControls programmatically?
Option 3: Inject via Constructor in Child Components
Summary
Use the ControlContainer to give you access to your parent formGroup.
DEMO APP:
https://nookpos.web.app/NookPOS/
CODE HERE:
https://github.com/tehfedaykin/NookPOS
SPECIAL THANKS:
to Mat Warger for the API!
Now go crazy creating nested forms in all sorts of ways!
Let's be friends!
SW-8534-5881-1506
Questions?
Slides available at: tehfedaykin.github.io/ControlContainer
Code here: https://github.com/tehfedaykin/NookPOS