Guide to get started with Angular Reactive Forms

Akash MoreSoftware Developer

Published On

Updated On

Table of Content

Introduction

Forms are the backbone of many web applications, enabling users to interact with and submit data to your app. In Angular, you can create forms using two main approaches: template-driven forms and reactive forms. While template-driven forms are great for simple use cases, reactive forms offer a more powerful and flexible approach to handling forms, especially when dealing with complex business logic, dynamic forms, or testable code.

This guide will walk you through the essentials of Angular reactive forms, explaining what they are, how to set them up, and how to build and validate a form step-by-step.

What Are Reactive Forms?

Reactive forms are a model-driven approach to handling forms in Angular. Unlike template-driven forms, where the form logic resides in the template, reactive forms are entirely controlled in the component class, providing a more structured and testable design.

Core Features of Reactive Forms

Form Model in TypeScript: Define the form structure in the component using FormGroup, FormControl, and FormArray.

Synchronous Updates: React to changes in real-time using observables.

Validation Control: Explicitly apply and manage validators.

Dynamic Forms: Easily create and manage dynamic forms with flexible structures.

This makes reactive forms a perfect choice for scenarios requiring:

Large-scale, complex forms.

Advanced form validations.

High testability.

How to Set Up Reactive Forms in Angular

Create a New Angular Application

To get started, create a new Angular project if you don’t already have one. Run the following commands:

ng new angular-reactive-forms
cd angular-reactive-forms

This will create a fresh Angular application with the necessary structure.

Install the Reactive Forms Module

Reactive forms are part of Angular's @angular/forms package. You need to import the ReactiveFormsModule in your app’s root module to use its features.

Update the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Building Your First Reactive Form

Define the Form Model

The first step in creating a reactive form is to define the form model in your component. A form model is a tree structure of FormGroup, FormControl, and optionally FormArray.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  registrationForm = new FormGroup({
    username: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [Validators.required, Validators.minLength(6)]),
  });

  onSubmit() {
    if (this.registrationForm.valid) {
      console.log('Form Submitted:', this.registrationForm.value);
    }
  }
}

Connect the Form to the Template

Use the [formGroup] directive to bind the form model to the template and formControlName to map each input field.

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <label for="username">Username:</label>
  <input id="username" formControlName="username" />
  <div *ngIf="registrationForm.get('username')?.invalid && registrationForm.get('username')?.touched">
    Username is required and must be at least 3 characters long.
  </div>

  <label for="email">Email:</label>
  <input id="email" type="email" formControlName="email" />
  <div *ngIf="registrationForm.get('email')?.invalid && registrationForm.get('email')?.touched">
    Please enter a valid email address.
  </div>

  <label for="password">Password:</label>
  <input id="password" type="password" formControlName="password" />
  <div *ngIf="registrationForm.get('password')?.invalid && registrationForm.get('password')?.touched">
    Password must be at least 6 characters long.
  </div>

  <button type="submit" [disabled]="registrationForm.invalid">Submit</button>
</form>

Validation in Reactive Forms

Built-in Validators

Angular provides several built-in validators, such as:

Validators.required
Validators.minLength
Validators.maxLength
Validators.email

For example:

email: new FormControl('', [Validators.required, Validators.email])

Dynamic Forms with FormArray

Reactive forms make it easy to create dynamic forms using FormArray. For example, if you want to let users add multiple skills:

skills = new FormArray([
  new FormControl('Angular'),
  new FormControl('React'),
]);

addSkill() {
  this.skills.push(new FormControl(''));
}

Bind this to your template:

<div formArrayName="skills">
  <div *ngFor="let skill of skills.controls; let i = index">
    <input [formControlName]="i" />
  </div>
</div>
<button (click)="addSkill()">Add Skill</button>

Reactive Forms vs Template-Driven Forms

Add a detailed comparison to show when to choose reactive forms over template-driven forms.

Feature	Reactive Forms	Template-Driven Forms
Form creation	Programmatic (TypeScript)	Declarative (HTML)
Validation	Explicit and robust	Simplistic
Dynamic form controls	Easy	Complex
Testability	High	Moderate

Conclusion

Reactive forms in Angular provide a robust, scalable, and testable solution for handling forms. They are ideal for applications that require complex validation logic or dynamic form controls. As you become comfortable with the basics, you can explore advanced topics like asynchronous validators, cross-field validation, and integration with APIs.

Schedule a call now

Start your offshore web & mobile app team with a free consultation from our solutions engineer.

We respect your privacy, and be assured that your data will not be shared

Call Us

Mail Us