Learn TypeScript 3 by Building Web Applications

Reactive forms

Reactive forms are synchronous and more explicit. With them, you define the form model programmatically in the component class, including the form controls, control groups, and so on. When changes occur on either side (that is, user inputs or form model controller), the other side is updated synchronously. This means that reactive forms are more predictable.

Here is an example from the official documentation of Angular:

import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', styleUrls: ['./profile-editor.component.css'] }) export class ProfileEditorComponent { profileForm = new FormGroup({ ...