Angular: Up and Running

Chapter 6. Working with Template-Driven Forms

In the chapters so far, we have worked on a basic Angular application, with the scaffolding in place and working with very simple components and user interactions. We have learned how to create components and do basic data and event binding, and took a look at the capabilities and extensions that this enables.

In this chapter, we will focus purely on how to handle user input, primarily via the use of forms. Forms are the mainstay for many web applications, and are used for everything from logging in and registering to more complex use cases. Creating and using forms is not simply about the template for the form, but also the data binding (both from UI to the code, and vice versa), form state tracking, validation, and error handling. There are two primary mechanisms to work with forms in Angular, and we will explore the template-driven approach in this chapter, followed by how we can create reactive forms in the following chapter.

Template-Driven Forms

Template-driven forms in Angular are an extension of how we have been creating and working with components so far. This approach is also reminiscent of how forms worked in AngularJS (1.x and below), as it uses a similar syntax and methodology. Anyone well-versed with that would have minimal problems adapting to this. In this section, we will create a simple form that allows us to add new stocks, and build our way up from there.

Template-driven forms, as the name suggests, start with ...