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:

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.