Angular forms are used to handle the user’s input. We use Angular form in our application to authorize users to log in, to update profile, to enter information, and to perform many other data-entry tasks.

In Angular 8, there are two approaches to handle the user’s input through forms:

angular8 forms
  • Reactive forms
  • Template-driven forms

Both methods are used to collect user input event from the view, validate the user input, create a form model to update, and provide a way to track changes.

Reactive and template-driven forms process and manage form data differently. Each offers different advantages.

Reactive forms

Reactive forms are more robust, and they are more scalable, reusable, and testable. If forms are a vital part of our application or are already using reactive patterns for building our app, handle responsive forms. 

Template-driven forms

It is useful for adding a simple form to an app, such as an email list signup form to an app, such as an email list signup form.  It is easy to add to an app, but they don’t scale as well as reactive forms. If we have fundamental form requirements and logic that can be managed in the template and use template-driven forms.

Difference between Reactive and Template-driven Forms:

 Index Reactive Forms Template-driven Forms
Setup (form model) Responsive forms are more explicit. They are created in the component class. Template-driven forms are less explicit. Directives create them.
Data model Structured Unstructured
Predictability Synchronous Asynchronous
Form Validation Functions Directives
Mutability Immutable Mutable
Scalability Low-level API access Abstraction on top of APIs.

Similarities between Reactive and Template-driven Forms

 There are some building blocks which are allocated by both reactive and template-driven forms:

  • FormControl: It is mainly used to track the value and authentication status of an individual form control.
  • FormGroup: It has been used to track the same values and level of a collection for the form control.
  • FormArray: It isused to route the same values and status for the array to form controls.
  • ControlValueAccessor: It is used to create a gap between Angular native DOM elements and.Form Control instances

Form Model Setup

Form model setup is used to trace value change between Angular forms and form input elements. Take an example to see the form model is defined and created.

Form model setup in Reactive forms:

See the component with an input field for a single control implemented using reactive forms.

The form model is the source of truthfulness in reactive forms. The source of truth supply the value and status of the form element at a given point of time.

Here, in the above example, the form model is the form Control instance.

angular8 forms1

In reactive forms, the form model is clearly defined in the component class. After the reactive form directive links the existing FromControl instance to a specific form element in the view using a value accessor.

Form Model setup in Template-driven Forms

See the same component with an input field for a single control implemented using template-driven forms.

In template-driven forms, the source of the truth is template itself.

angular8 forms2

The form model abstraction promotes simplicity over the structure. The template-driven form directive NgModel creates and organizes the FormControl instance for any form element. It’s less explicit, but it eliminates the direct control over the form model.

Pin It on Pinterest

Share This