Overview

Web applications use forms when it comes to collecting data from the user. Use cases vary from allowing users to log in, filling in payment information, booking a flight, or even performing a search. Form data can later be persisted on local storage or sent to a server using a backend API. A form usually has the following characteristics that enhance the user experience of a web application:

• Can define different kinds of input fields.

• Can set up different kinds of validations and display validation errors to the user.

• Can support different strategies for handling data if the form is in an error state.

The Angular framework provides two approaches to handling forms: template-driven and reactive. Neither approach is considered better than the other; we have to go with the one that suits our scenario the best. The main difference between the two approaches is how they manage data:

• Template-driven forms are easy to set up and add to an Angular application, but they do not scale well. They operate solely on the component template to create elements and configure validation rules; therefore, they are not easy to test. They also depend on the change detection mechanism of the framework.

• Reactive forms are more robust when it comes to scaling and testing and when they are not interacting with the change detection cycle. They operate in the component class to manage input controls and set up validation rules. They also manipulate data using an intermediate form model, maintaining their immutable nature. This technique is for us if we use reactive programming techniques extensively or if our Angular application comprises many forms.