What Are Angular Forms And How To Implement A Simple Form? | Difference Between Template Driven and Reactive Forms

Web Team

May 6, 2020

Angular Forms: Template Driven Vs Reactive Forms Approaches

Angular Forms are a crucial component of practically any version of Angular app, especially enterprise apps like dashboards, live data apps, and data collecting. Throughout the evolution of Angular versions, its forms module has undergone remarkable enhancements, enabling developers to create sophisticated and user-friendly web forms effortlessly. Hence, as form requirements vary dramatically in a single moment, it’s critical to have a setup as flexible as possible. 

Why Do We Need Angular Forms:

Angular forms are widely used in applications for user login purposes, to upload certain information, update profiles, to apply for different fields, and to perform more data entry tasks. Nevertheless, validation, recording user inputs, and showing error messages can also be achieved using forms in Angular. 

If you are still wondering why one needs angular form for web application development, then here is your answer! This column aims to give you a detailed understanding of forms in Angular, advantages of angular in web development, & its simplest and best implementation. 

With respect to the handling of shapes, form builder Angular / angular forms has two approaches that are 

1. Template-Driven Forms
2. Reactive Forms

Both the above approaches of forms in Angular have a few common building blocks holding the following attributes:

FormControl:

FormControl is mainly used for monitoring user input and for authenticating the individual form control.

FormGroup:

FormGroup is 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 form builder Angular native DOM and form control elements.

More On Template Driven Forms

Template-driven forms make it easy to create simple apps in an application like an email list signup form. Moreover, each and every field will have a separate individual binding in the Template-driven forms.

Having said that, let us get a deep understanding of the procedure involved in creating a simple registration form

1. To generate a component using the command.
(or)

2. In order to enable Template-driven forms, one is supposed to import the “FormsModule” specific in app.module.ts

3. Creation of a simple registration using template-driven forms

ngModel :

The form input fields use “[(ngModel)]” directive to bind the properties of the field i.e. like #first_name=”ngModel”.

Besides storing the data, “ngModel” is responsible for providing the validation behavior (i.e. number, email, URL) and maintaining the control status (valid/invalid, touched/untouched, validation errors).

ngForm:

“ngForm” is used to trace out the form values and validation status. 

ngSubmit:

Use “ngSubmit” to get the values of the form while submitting. This event gets called on form submission.

Validation:

Here, the validation is executed using the “required” attribute.

Once the form is submitted and if it is invalid, then the error message gets displayed.

Advantages Of Template-Driven Forms:

• Handling the forms is as simple as reactive forms.
• Template-driven forms are easy to use.
• They are similar to AngularJs.
• Two-way data binding (using [(NgModel)] syntax).
• Minimal component code.
• Template-driven form is also more than enough to build a large range of forms.

However, Unit Testing cannot be achieved with the form validations. The only way to test the logic is to run an end to end test with a browser FormControl.

Looking forward to building revolutionary web applications with the best custom software development company? Calibraint is here to help you with our efficacious solutions and help your business reach customers in large numbers. 

Reactive Forms

Practically, the form input values keep on changing over time and hence, the reactive forms provide a model-driven approach to handle these varying form input values. At a certain point, reactive forms provide access to the state and meaning of form control.  The component class or the component prototype is on the other hand used to control the current state and value.

Basically, a reactive form is an HTML form filed with RxJS to manage the status as a real-time stream. This makes the point clear that one can receive changes to the values as visible and respond to the changes accordingly with validation errors, feedback, database operations, and more. 

What Are The Benefits Of Using Reactive Forms In Angular?

Structured Data Flow:

As the reactive form is led by the component class, soon after the creation of the link with FormControlDirective, the form accesses directly to the FormControl. This is the reason why all elements in the view(template) are connected to the FormControl(form model).

Since the reactive form is synchronous and is not dependent on the UI rendering, whenever a change occurs and a view update is needed, it will not re-render the DOM. Whereas in template-driven forms every specific form element is linked to a directive that internally manages the form model.

Immutability:

Reactive forms perform as an immutable data structure and thus this form holds the data model pure. Whenever a change occurs to the form, the FormControl instance rather than updating the existing data model will return a new state (a new data model).

This particular form uses observable operators to return a new data model by ensuring that it maintains the integrity of the model between the changes. While in template-driven form, it uses the mutable approach by using the ngModel approach.

Predictability:

Since the Reactive form is predictable, it accesses the data model synchronously. The forms are created around measurable sources and the inputs and values are given as the sources of input values that can be accessed synchronously. Also, they use observed streams to monitor form changes that predictability makes it easy to test.

Scalability:

The reactive element is synchronous and that makes the scaling simple. Nonetheless, being highly reusable greatly helps with large-scale forms. While the Template-driven form is asynchronous, the scalability is tough and resilient.

FormControl

FormControl is a class that allows individual form control, monitors value, validation status, and gives a wide variety of public API methods. Like form input, checkbox, select, text area, and more.

A basic example of form control:

FormGroup

FormGroup is basically a group of instances of FormGroup that holds the track of the value and validation status of the related group and also provides public APIs. It’s a group of form fields that have the ability to be manipulated and validated together.

Form Builder

Form Builder helps in making things easy as it helps one to forget about all the new form groups and form controls. FormBuilder replaces FormGroup and FormControls directly and stays as an alternate of both together.

Let’s see an example of the same:

Firstly, import FormBuilder from @angular/forms and then to use the FormBuilder, request via dependency injection. And this is achieved through the constructor of our component.

And,

Hence, the above case makes use of FormBuilder to create a new this.fb.group() instead of using new FormGroup(). 

Extracting The Data From Form:

The values of the form can be accessed by its values property.

A developer needs to be more careful while doing this as the values are still referred to by the form. If one just copies that reference and modifies the data elsewhere, the form will definitely be impacted and this, in turn, causes unreal side-effects.

Example in an onSubmit call of a form:

Reset The Form By :

To reset the form, one needs to use the form’s reset method without any parameter, 

which results in an empty object, or pass a set of default parameters along:

How To Use Reactive Forms In The Angular Application?

To use reactive forms in the angular application, developers need to import the Reactive Forms Module :

With reactive forms, the logic is declared absolutely in the class of components, in app.component.html :

formGroup:

In the component class, the form will be classified as a FormGroup. Hence the formGroup directive allows the form group to be given a name.

formControlName:

Every form field should have a formControlName directive with a value which is nothing but the name used in the component class.

ngSubmit:

nySubmit is the event that will be triggered upon submission of the form. In app.component.ts let’s see how to define the formGroup:

Validation:

The validation process is simple! Just by adding the validator class to the imports and declaring the form controls with arrays instead of simple string values one can achieve the validation. One can also notice how multiple validators are used in the same form of control by wrapping them into an array.

Here is an example:

Let’s look into the idea of forms in Angular further, 

Difference Between Template Driven And Reactive Forms

The attributes that contribute to template driven forms vs reactive forms are as follows,

Form Module:

Template-driven forms employ “FormsModule”, while Reactive forms are based on “ReactiveFormsModule”.

Synchronized Nature:

Reactive forms are mostly synchronous in nature whereas Template-driven forms are asynchronous.

Logic Driven Source:

The template-driven approach draws logic from the template, whereas in reactive driven forms the logic resides mainly in the component or typescript code.

Complexity:

In general, Template-driven forms are used to create simple forms while Reactive forms are used to create complex forms. This hence entails the major difference between reactive form vs template driven form. 

End Lines:

Just like the aforementioned, reactive forms vs template driven forms of angular put up several other differences as well. Despite that, both the forms stand as two different approaches that get suited based on the application requirement. With Angular Forms and its seamless Angular components interaction methods, developers can efficiently build intuitive user interfaces and enhance user experiences like never before. 

Template Driven Forms are easy to use and have great power for form validation as it is the best fit for simple forms. But by using Template Driven Form, it is difficult to carry out the work in complex forms hence the Reactive forms are used here. Both template driven vs reactive forms have their own merits & demerits and based on the utilization of the form, the selection can be made.

The forms in Angular are extremely strong tools that can be used to carry out extremely large complex tasks. However, they can be hard and hope this article has helped you deal with some of the most prevalent issues. However, it is by no means thorough and perfect! So feel free to dig deeper into Angular Forms and angular lifecycle – there’s always something new to learn!

Frequently Asked Questions

What Are Angular Forms?

The crucial component of practically any Angular app that is used to handle user’s input, especially in enterprise apps, is known as angular forms. 

How Many Types Of Forms Are There In Angular?

Two types! There are two types of forms in Angular that provide two different approaches to handling user input through forms (i.e) reactive and template-driven forms. 

What Is Reactive Form In Angular?

A type of form that manages the state of a form at a specific point in time using explicit and immutable approaches is known as  a Reactive Form. 

Why Do We Use Reactive Forms In Angular?

Reactive forms in angular provide access to information about a given control through properties and methods provided with each instance.

What Is Template Form In Angular?

Template-driven forms are where one can write logic, validations, controls etc, in the template part of the code (Html code) and use two-way data binding using the [(NgModel)] syntax. 

Angular Forms Article By,

Anni Joice (Associate Software Developer)

Sandra Sadan (Associate Software Developer)

Web Team

06 May 2020

1

1