Choose Your Own { Form } Adventure


A Modern Angular Fairy Tale ...


by Jennifer Wadella
Read to you by ...

Jennifer Wadella

@likeOMGitsFEDAY

  • Director of Angular Development at Bitovi
  • Angular GDE/ Queen of Angular Forms
  • International Speaker (pre-pandemic)
  • Kombucha brewin' crazy plant lady

Once Upon A Time ...

Angular Shield
Real Housewives of Salt Lake City
Octocat

"Mirror, mirror on the wall, who will get the highest valuation of them all?

  1. Build a form where users can choose
    their favorite musical from a list of choices.
  2. Users to have to enter their favorite
    song from the musical they selected.
  3. Don't allow users to use the song input
    until they have chosen a musical.
Template Driven Forms
Reactive Forms
AbstractControl is the key
Disabled Demo

"The form is complete!"

  1. Validate that the number the user entered
    is actually from that musical by checking against magical musicals API
  2. Show user when whole section of form is invalid
Validation Lodge
Validation Demo

"One Final Task"

  1. Allow users to add multiple inputs to form to collect
    information for musical roles and actors to play the role.
  2. Allow users to delete unneeded inputs
Validation Demo
Template Driven Forms
Reactive Forms
“I can use Reactive Forms
OR
Template Driven forms
to solve my problems!”
“Your openness to different approaches and not shaming technology choices has broken the spell on me.”

And They All Coded Happily Ever After.

The Moral of Our Story ...

There are different ways to solve problems in Angular, and whatever works best for YOU and your team is the best way to implement forms solutions.

Questions?

Demo Application: https://github.com/tehfedaykin/ChooseYourOwn-Form-Adventure

Need help with Angular? Work with me! jennifer@bitovi.com