Basics of Angular Forms

In this article we will learn about Basics of Angular Forms. Angular forms are used to handle user’s input. We can use Angular form in our application to enable users to log in, to update profile, to enter information, and to perform many other data-entry tasks.

There are 2 approaches to handle user’s input through forms: Reactive forms & Template-driven forms. We will discuss it more about these two forms on upcoming articles.

Why we need Forms?

Forms are the main building blocks of any type of application. When we use forms for login, registration, submission. Help request, etc., it is necessary that whatever forms we are developing, they should be user friendly. And it should have the indication of what went wrong by display user friendly message, etc.

Forms are really very very important to collect the data from the users. Often, each website contains forms to collect the user data. You can use forms to login, submit a help request, place an order, book a flight, schedule a meeting, and perform other countless data entry tasks.

What are Angular Forms?

Developing forms requires design skill as well as framework support for two-way data binding, change tracking, validation, error handling, etc. The Angular Framework, provides two different ways to collect and validate the data from a user. They are as follows:

1. Template-Driven Forms
2. Model-Driven Forms (Reactive Forms)

Both the above approaches of angular forms have few common building blocks holding the following attributes,

FormControl: FormControl is used mainly for monitoring user input and authentication of the individual form control.

FormGroup: FormGroup used to track the same values and authentication status for a collection of a form of control.

FormArray: FormArray tracks the same values and status for the array of the form control.

ControlValueAccessor: ControlValueAccessor is used to develop a distance between Angular native DOM and form control elements.

Template Driven Forms in Angular:

Template Driven Forms are simple forms which can be used to develop forms. These are called Template Driven as everything that we are going to use in an application is defined into the template that we are defining along with the component.

In order to use Template Driven Forms, we need to import FormsModule into the application root module i.e. app.module.ts file.

Features of Template Driven Forms:

• Easy to use.
• Suitable for simple scenarios and fail for complex scenarios.
• Similar to Angular 1.0 (Angular JS)
• Two way data binding using NgModule syntax.
• Minimal Component code
• Automatic track of the form and its data.
• Unit testing is another challenge

Model-Driven Forms (Reactive Forms) in Angular:

In a model driven approach, the model which is created in the .ts file is responsible for handling all the user interactions and validations. For this, first, we need to create the model using Angular’s inbuilt classes like formGroup and formControl and then we need to bind that model to the HTML form.

This approach uses the Reactive forms for developing the forms which favor the explicit management of data between the UI (User Interface) and the Model. With this approach, we create the tree of Angular Form Controls and bind them in the Native Form Controls. As we create the form controls directly in the component, it makes it a bit easier to push the data between the data models and the UI elements.

In order to use Reactive Forms, you need to import ReactiveFormsModule into the applications root module i.e. app.module.ts file.

Features of Reactive Forms:

• More flexible, but need a lot of practice
• Handles any complex scenarios.
• No data binding is done (Immutable data model preferred by most developers).
• More component code and less HTML Markup.
• Easier unit testing.
• Reactive transformations can be made possible such as
• Handling a event based on a denounce time.
• Handling events when the components are distinct until changed.
• Adding elements dynamically.

Which one is better – Template Driven or Reactive Forms?

Neither reactive nor template driven are better over each other. For example, Template Driven forms are generally used to create simple forms. On the other hand, Reactive forms are used to create complex forms. For example, if you want to add form controls dynamically or perform cross-field validation, then you need to use the Reactive forms approach. There are several other differences, between Template driven and Reactive forms that we will discuss in our upcoming articles.

Conclusion

Here we discussed about Basics of Angular Forms and how many types of forms are present in Angular.

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂