Introduction to forms in Angular
Tags: angular, typescript
Published: 2021-03-16 00:37:47

---
title: Introduction to forms in Angular
published: true
date: 2021-02-16 00:00:00 UTC
tags: angular, typescript
canonical_url: https://www.mariokandut.com/how-to-handle-forms-in-angular/
---

Handling user input with forms is common in many applications to enable users to log in, to modify a profile, to enter some information, and to perform many other data-entry tasks. Angular provides two different approaches to handling user input through forms **Reactive** and **Template-driven**. Both approaches capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

This article is an overview of both approaches and helps you decide which type of form to choose. (Heavily inspired by the official [Angular overview](https://angular.io/guide/forms-overview#introduction-to-forms-in-angular)).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#choosing-an-approach)Choosing an approach

The main difference is how the forms process and manage data. Each approach offers different advantages.

**Reactive forms**

- direct and **explicit access** to the underlying forms object model
- more **robust** than Template-driven forms
- scalable
- reusable
- testable

**Template-driven forms**

- rely on directives in the template to create and manipulate the underlying object model
- useful for adding a simple form to an app (email list sign up)
- easy to add
- don't scale as well as reactive forms

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#key-differences-reactive-forms-vs-template-driven-forms)Key differences: Reactive Forms vs. Template-Driven Forms

| | REACTIVE | TEMPLATE-DRIVEN |
| --- | --- | --- |
| **Setup of form model** | Explicit, created in component class | Implicit, created by directives |
| **Data model** | Structured and immutable | Unstructured and mutable |
| **Predictability** | Synchronous | Asynchronous |
| **Form validation** | Functions | Directives |

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#scalability-and-reusability)Scalability and Reusability

Scalability and Reusability is very important to consider, when you have complex forms in your application and being able to reuse form models across components is critical.

**Reactive forms are more scalable** than template-driven forms and provide direct access to the underlying API and synchronous access to the form data model (large-scale forms). The setup for testing and testing is easier than template-driven forms and does not require deep understanding of change detection.

**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. This abstraction of the underlying API affects testing. Test setup takes more time and relies on manual change detection execution to run properly.

[💰: Start your cloud journey with $100 in free credits with DigitalOcean!](https://m.do.co/c/29f238135b61)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#setting-up-the-form-model)Setting up the form model

**Reactive Forms** and **Template-driven Forms** track value changes between the form input elements and the form data in the component model. Both approaches **share underlying building blocks** , they differ in how to create and manage form-control instances.

Reactive and template-driven forms are built on the following **base classes** :

- **FormControl** tracks the value and validation status of an individual form control.
- **FormGroup** tracks the same values and status for a collection of form controls.
- **FormArray** tracks the same values and status for an array of form controls.
- **ControlValueAccessor** creates a bridge between Angular FormControl instances and native DOM elements.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#setup-form-model-in-reactive-forms)Setup form model in Reactive Forms

The form model is defined directly in the component class. The `[formControl]` directive links the explicitly created FormControl instance to a specific form element in the view, using an internal value accessor.

The following component implements an input field for a single control, using reactive forms. In the example below, the form model is the FormControl instance.

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

@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color:
    <input type="text" [formControl]="favoriteColorControl" />
  `,
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}
```

The forms model provides the value and status of the form element at any given point in time, through the `[formControl]` directive on the input element. It is the source of truth in reactive forms.

![Reactive Form Model](https://www.mariokandut.com/static/d2640c995a74301c6c1ff808217f23a3/fcda8/angular-key-diff-reactive-forms.png "Reactive Form Model")_Figure 1. Direct access to forms model in a reactive form._

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#setup-form-model-in-template-driven-forms)Setup form model in template-driven forms

The form model is **implicit**. The directive **NgModel manages a FormControl instance** for a given form element. The following component implements the example using template-driven forms.

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

@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor" />
  `,
})
export class FavoriteColorComponent {
  favoriteColor = '';
}
```

In a template-driven form the source of truth is the template. You have **no direct programmatic access to the FormControl** instance.

![Angular Template-driven Forms](https://www.mariokandut.com/static/11b72e4a64a465f8534b03e6cd26f33b/fcda8/angular-key-diff-td-forms.png "Angular Template-driven Forms")_Figure 2: Indirect access to forms model in a template-driven form._

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

How to decide which Angular forms approach to use:

Use **Reactive Forms** if,

- forms are key in your application OR
- you're already using reactive patterns OR
- scalability OR
- reusability is important for your application.

Use **template forms** , if

- you have very basic form requirements and logic that can be managed solely in the template.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**. If you want to know more about **[Angular](https://www.mariokandut.com/tags/angular)**, have a look at these [Angular Tutorials](https://www.mariokandut.com/tags/angular).

**References (and Big thanks):**[Google - Angular](https://angular.io/docs), [Google Angular Forms](https://angular.io/guide/forms-overview#setup-in-template-driven-forms)