Forms in Angular

Using forms for user input is the mainstay of any frontend application. Angular framework provides a very robust API for handling forms. In Angular there are two different approaches to handling user input through forms-

• Template-driven forms
• Reactive forms

Both of these approaches for handling forms in Angular provides the functionality to-

1. Capture user inputs from the UI (View)
2. Validating user input
3. Creating a form model and data model
4. Provide a way to track changes in the form and update model accordingly.

In this post we’ll go through the common building blocks used by both approaches, differences between the two approaches and other information to help you decide which type of form works best for your situation.

Table of contents

1. Classes used in Angular forms
2. Angular Template-driven forms
3. Angular Reactive forms
4. Template-driven Vs Reactive forms in Angular

Classes used in Angular forms

Whether you create a reactive form or a template-driven form following base classes are used.

• FormControl- Represents an individual form control and tracks its value and validation status.
• FormGroup- Represents a collection of form controls as a group and tracks the values and status for that collection of form controls. Read more about FormGroup in this post- FormGroup in Angular With Examples
• FormArray- Tracks the same values and status for an array of form controls. Read more about FormArray in this post- FormArray in Angular With Example
• ControlValueAccessor- Its an interface that acts as a bridge between Angular FormControl instances and native DOM elements.

Angular Template-driven forms

In template-driven forms most of the form related functionality is in the template. Template-driven forms rely on directives in the template to create and manipulate the underlying object model. They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.

In template-driven forms, the form model is implicit. The NgModel directive creates and manages a FormControl instance for a given form element.

Here is an example template and component implementing a single control form using template-driven forms.

import { Component } from '@angular/core';

@Component({
  selector: 'app-emp',
  template: `
    Employee Name: <input type="text" [(ngModel)]="empName">
  `
})
export class EmployeeComponent {
  empName = '';
}

• For full example of template-driven form check ths post- Angular Template-Driven Form Example

Angular Reactive forms

With reactive forms form model is defined directly in the component class so you have direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable.

The [formControl] directive links the explicitly created FormControl instance to a specific form element in the view, using an internal value accessor. Here is an example template and component implementing a single control form using reactive form.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-reactive-emp',
  template: `
    Employee Name: <input type="text" [formControl]="empName">
  `
})
export class FavoriteColorComponent {
  empName= new FormControl('');
}

• For full example of Reactive form check ths post- Angular Reactive Form Example

Template-driven Vs Reactive forms in Angular

1. Setup of form model

In Angular reactive forms form model is explicit, created in component class.

In Angular template-driven forms form model is implicit, created by directives.

2. Data model

Data model is structured and immutable in Reactive forms. Each time a change is triggered on the data model, the FormControl instance returns a new data model rather than updating the existing data model.

It is unstructured and mutable in template-driven forms. Relies on two-way data binding to update the data model in the component as changes are made in the template.

3. Updates from the view to the model and from the model to the view are synchronous in reactive forms.

Updates are asynchronous in template-driven forms.

4. Form validation

Reactive forms define custom validators as functions.

Template-driven forms are tied to template directives, and must provide custom validator directives that wrap validation functions.

5. Scalability

Reactive forms are more scalable than template-driven forms. They provide direct access to the underlying form API and synchronous access to the form data model, making creating large-scale forms easier.

Template-driven forms focus on simple scenarios and are not as reusable. They abstract away the underlying form API, and provide only asynchronous access to the form data model.

6. Data flow

In reactive forms each form element in the view is directly linked to the form model (a FormControl instance).

In template-driven forms, each form element is linked to a directive that manages the form model internally.

Reference: https://angular.io/guide/forms-overview

That's all for this topic Forms in Angular. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

---

Related Topics

1. Angular Template-Driven Form Validation Example
2. Angular Reactive Form Validation Example
3. FormBuilder in Angular Example
4. Checkbox in Angular Form Example
5. Radio Button in Angular Form Example

You may also like-

1. Angular Route Resolver - Passing Data Dynamically
2. Angular Disable Button Example
3. Angular Application Bootstrap Process
4. Angular ngClass Directive With Examples
5. How to Remove Duplicate Elements From an ArrayList in Java
6. break Statement in Java
7. Python String isdigit() Method
8. Spring MVC Redirect Example