Overview of Forms in Angular

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.

Reactive forms are more explicit and created in the component class and template-driven forms are less explicit and created by directives.

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.

ControlValueAccessor control instance creates a bridge between Angular FormControl instances and native DOM elements.

Data Flow in Reactive Forms

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 user types a value into the input element, in this case, the text value says "Hello World".
The form input element emits an "input" event with the latest value.
The control value accessor listening for events on the form input element immediately relays the new value to the FormControl instance.
The FormControl instance emits the new value through the valueChanges observable.
Any subscribers to the valueChanges observable receive the new value.

The user calls the exampleControl.setValue() method, which updates the FormControl value.
The FormControl instance emits the new value through the valueChanges observable.
Any subscribers to the valueChanges observable receive the new value.
The control value accessor on the form input element updates the element with the new value.

Data Flow in Template-Driven Forms

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 user types "Hello World" into the input element.
The input element emits an "input" event with the value "Hello World".
The control value accessor attached to the input triggers the setValue() method on the FormControl instance.
The FormControl instance emits the new value through the valueChanges observable.
Any subscribers to the valueChanges observable receive the new value.
The control value accessor also calls the NgModel.viewToModelUpdate() method which emits an ngModelChange event.
Because the component template uses two-way data binding for the exampleText property, the exampleText property in the component is updated to the value emitted by the ngModelChange event.

The exampleText value is updated in the component.
Change detection begins.
During change detection, the ngOnChanges lifecycle hook is called on the NgModel directive instance because the value of one of its inputs has changed.
The ngOnChanges() method queues an async task to set the value for the internal FormControl instance.
Change detection completes.
On the next tick, the task to set the FormControl instance value is executed.
The FormControl instance emits the latest value through the valueChanges observable.
Any subscribers to the valueChanges observable receive the new value.
The control value accessor updates the form input element in the view with the latest exampleText value.

In reactive forms, validations are handled through custom validators as functions that receive control to validate.
In template-driven forms validations are handled through directives and must provide custom validator directives that wrap validation functions.