Guide to get started with Angular Reactive Forms

img
akash.png
Akash MoreSoftware Developerauthor linkedin
Published On
Updated On
Table of Content
up_arrow

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