Overview

In this chapter we will cover both the template-driven and model-driven approaches to creating forms in Angular.

We are going to create a signup form with a first name, last name, email, password and language select box.

We’ll be using the Twitter Bootstrap UI framework so the HTML markup and classes will match the layout and styles needed for Bootstrap.

We will add visual feedback to the users so they know if the individual form fields contain valid values or not. If they are invalid we’ll also show the user helpful validation error messages so they can fix their inputs.

Although the template-driven approach is simpler, behind the scenes it’s actually the model-driven approach with the models automatically created for you.

So we’ll first explain the model-driven approach, then the template-driven approach and finally we’ll show a method of implementing a reactive model-driven form with RxJS.