Angular 7 Forms

Forms in Angular 7 are used to handle the user’s input, enable users to log in, update profile, enter information, and to perform different data-entry tasks. To handle the user’s input through forms, there are 2 approaches in Angular 7:

  • Reactive forms
  • Template-driven forms

Reactive Forms vs. Template-driven Forms:

For the collection of the user’s input events from the view, validation of the user’s input, creation of a form model and data model to update, and to facilitate a way to track changes, the Reactive forms, and Template-driven forms are used. However, each of these approaches manages and processes the data differently, offering different advantages.

Reactive Forms:

  • More robust.
  • More scalable, reusable, and testable.
  • Best to use if forms are a key part of your application, or the application is already built using reactive patterns.

Template-driven Forms:

  • Best to use to add a simple form to an application, such as email list signup form.
  • Easy to use in the application.
  • Not as scalable as Reactive forms.
  • Most preferred to use if an application requires a very basic form and logic.
  • Easily managed in a template.

Difference between the Reactive Forms and the Template-driven Forms:

Comparison Index Reactive Forms Template-driven Forms
Setup (form model) More explicit.

Created in the component class.

Less explicit.

Created by the directives.

Data model Structured Unstructured
Predictability Synchronous Asynchronous
Form validation Functions Directives
Mutability Immutable Mutable
Scalability Low-level API access Abstraction on the top of APIs

Similarities between the Reactive Forms and the Template-driven Forms:

Both the reactive and template-driven forms share all the building blocks that are listed below:

  • FormControl: Used for tracking the value and validation status of an individual form control.
  • FormGroup: Used for tracking the same values and status for a collection of form controls.
  • FormArray: Used for tracking the same values and status for an array of form controls.
  • ControlValueAccessor: Used for creating a bridge between Angular FormControl instances and native DOM elements.

Form Model Setup:

To track the value changes between Angular forms and form input elements, the Form model setup is used.

Form model setup in Reactive forms:

The form model in the reactive forms is the source of truth which is explicitly defined in the component class. At a given point in time, the value and the status of the form element is provided by the source of truth. The existing FormControl instance is linked to a specific form element in the view using a value accessor (ControlValueAccessor instance) by the reactive form directive.

Example:

component.ts:

import { Component } from '@angular/core';  
import { FormControl } from '@angular/forms';  
@Component({  
  selector: 'app-reactive-favorite-color',  
  template: `  
    Color: <input type="text" [formControl]="ColorControl"> `  
})  
export class ColorComponent {  
  ColorControl = new FormControl('');  
}

Explanation:

In the above example, we are demonstrating how the form model is defined and created in the reactive forms. The created component contains an input field for a single control implemented using the reactive forms. Here, the form model is the FormControl instance and the reactive form directive is the FormControlDirective.

Form model setup in Template-driven Forms:

The source of truth in the template-driven forms is the template itself. The simplicity is promoted over the structure by the form model abstraction. The creation and management of the FormControl instance for a given form element are controlled by the template-driven form directive NgModel. It is less explicit. The direct control is, however, removed over the form model.

Example:

component.ts:

import { Component } from '@angular/core';  
@Component({  
  selector: 'app-template-favorite-color',  
  template: `  
    Color: <input type="text" [(ngModel)]="favColor"> `  
})  
export class ColorComponent {  
  favColor = '';  
}

Explanation:

In the above example, we are demonstrating how the form model is defined and created in the template-driven forms. The created component contains an input field for a single control implemented using template-driven forms.

Please Share