Reactive Forms

Before starting, let’s see some important questions.

• Why do I want to read this?
  • Forms are finicky and obtuse. Angular & Rx make building user-friendly forms a breeze
• What will I learn?
  • How to implement user-friendly techniques like autocorrection & suggestion
• What will I be able to do that I couldn’t do before?
  • Build forms that anticipate the user’s needs and allow for large transformations
• Where are we going next, and how does this fit in?
  • This is a solid building block in your Angular knowledge - but it’s all frontend. In the next chapter, you’ll hook this up to a backend.

Reactive forms

Initially defined in 1999, the <form> element has powered the web ever since.

Web forms started out as an obtuse collection of inputs that only validated when the user submitted the entire form, resetting everything if one detail was off.

In the modern era, our users expect much more from forms. Our forms need to load quickly, respond with inline validation, and save the user’s state, so nothing is lost due to a connection hiccup or page refresh.

Angular sprinkles RxJS liberally across its form tooling with the ReactiveForms module, bringing a decades-old element up to the cutting edge.

This chapter walks you through creating a set of forms for a pizza shop, showcasing the many features of reactive forms along the way.