Forms in Angular enable users to work with user inputs like login, register, save, update, and many other data entry tasks.
There are two ways through which we can handle user inputs in Angular: reactive forms and template-driven forms. Both 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.
Reactive forms are more scalable, testable, reusable, and robust. If you build applications which involve more reactiveness, then use reactive forms of Angular to build applications.
Let's consider an example where we are setting up the Reactive form using the form model FormControl instance.
Filename: example.component.ts
1import { Component } from '@angular/core';
2import { FormControl } from '@angular/forms';
3
4@Component({
5 selector: 'app-reactive-example',
6 template: `
7 Example input: <input type="text" [formControl]="exampleControl">
8 `
9})
10export class ExampleComponent {
11 exampleControl = new FormControl('');
12}
Template-driven forms are not as scalable as Reactive forms. If you want a very basic form requirement and logic that can be managed solely in the template, use template-driven forms.
Let's consider an example for a template-driven form where we are binding the text value exampleText to the input element.
Filename: example.component.ts
1import { Component } from '@angular/core';
2
3@Component({
4 selector: 'app-template-example',
5 template: `
6 Example Text: <input type="text" [(ngModel)]="exampleText">
7 `
8})
9export class ExampleComponent {
10 exampleText = '';
11}
From this guide, you will be able to identify which form type to choose based on your requirement.
The data model in reactive forms is more structured than template-driven forms.
Reactive forms are synchronous in nature, whereas template-driven forms are asynchronous.
Form validations in reactive forms are handled through functions, whereas in template-driven forms they are handled through directives.
Reactive forms are immutable in nature, whereas template-driven forms are mutable.
FormControl control instance tracks the value and validation status of an individual form control.
FormGroup control instance tracks the same values and status for a collection of form controls.
FormArray control instance tracks the same values and status for an array of form controls.
Forms in Angular use a form model to keep track of value changes between Angular forms and form input elements.
Data flow in Angular is handled differently in both the reactive and template-driven forms.
The data flow examples below begin with the example text input field example from above, and then show how changes to example text are handled in reactive forms compared to template-driven forms.
Updates or changes from the view (or DOM) to the model and from the model to the view are synchronous and aren't dependent on the UI rendering. In reactive forms, each form element in the view is directly linked to a form model (FormControl instance).
Let's consider an example shown below and go through the steps of data flow in reactive forms.
Filename: example.component.ts
1import { Component } from '@angular/core';
2import { FormControl } from '@angular/forms';
3
4@Component({
5 selector: 'app-reactive-example',
6 template: `
7 Example input: <input type="text" [formControl]="exampleControl">
8 `
9})
10export class ExampleComponent {
11 exampleControl = new FormControl('');
12}
The steps below outline the data flow from view to model.
The steps below outline the data flow from model to view.
In template-driven forms, each form element is linked to a directive that manages the form model internally.
Let's consider an example shown below and go through the steps of data flow in template-driven forms.
Filename: example.component.ts
1import { Component } from '@angular/core';
2
3@Component({
4 selector: 'app-template-example',
5 template: `
6 Example Text: <input type="text" [(ngModel)]="exampleText">
7 `
8})
9export class ExampleComponent {
10 exampleText = '';
11}
The steps below outline the data flow from view to model.
The steps below outline the data flow from model to view.
Validation is one of the important parts of forms for security and other reasons. Angular provides a set of built-in validators as well as the ability to create custom validators.
In this guide, we have explored the forms in angular and we saw different types of forms like reactive and template-driven forms.
You can learn more about Angular in my guide Angular Data Binding Overview.