Form validation with template-driven forms

A great user experience is key to acquiring more users that love to use your applications. And using forms is one of those things that users don't really enjoy. To make sure that users spend the least amount of time filling in forms and are done with them faster, we can implement form validation to make sure that users enter the appropriate data a.s.a.p. In this recipe, we're going to look at how we can implement form validation in template-driven forms.

Getting ready

The project for this recipe resides in chapter08/start_here/tdf-form-validation:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab and you should see the app as follows:

Figure 8.3 – TDF form validation app running on http://localhost:4200

Now that we have the app...