Angular 8 Forms

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:

• 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.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-favorite-color',
template: `
Favorite Color: '
})
export class FavoriteColorComponent {
favoriteColorControl = new FormControl('');
 } 

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.

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.

import { Component } from '@angular/core';
@Component({
selector: 'app-template-favorite-color',
template: `
Favorite Color:  `
})
export class FavoriteColorComponent {
favoriteColor = ''
} 

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

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.