The ControlContainer & I ( ...and Tom Nook)

Jennifer Wadella

Jennifer Wadella headshot

Jennifer Wadella

@likeOMGitsFEDAY

  • Lead Angular Consultant at Bitovi
  • Expert Tarantula Catcher
  • Fermentista

Nook Needs a Favor ...

Tom Nook

Island Point of Sale System

Nook Point of Sale

Demo App:

https://nookpos.web.app/NookPOS/

Requirements

  • Show outstanding loans
  • Create new loans
  • Simple interface
gif of first iteration
Tom Nook reacts to first iteration

"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!

Form Control error

"formControlName must be used with a parent formGroup directive."

FormGroup
^
👀
FormControlName

How do We Access Our FormGroup?

Sad villager

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!

Happy villager

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!

Clapping Villager

Let's be friends!

SW-8534-5881-1506

Animal Crossing friends

Questions?


Slides available at: tehfedaykin.github.io/ControlContainer

Catching Tarantulas

Code here: https://github.com/tehfedaykin/NookPOS

#ngconf2020@likeOMGitsFEDAY SW-8534-5881-1506