Reactive Forms

The Course Management application now retrieves course information dynamically from a REST API using Angular's HttpClient. While users can view available courses and create new course records, the application still lacks a structured way to register and validate course information. Angular Reactive Forms solve this problem by providing a scalable approach to form creation, validation, and dynamic user input.

In this module, we'll extend the existing Course Management application by adding a Course Registration form below the course list. Users will be able to enter course details, validate their input, dynamically add course modules, and submit the form. By the end of this module, the application will demonstrate Form Controls, Form Groups, Validation Techniques, and Dynamic Forms while preserving the Routing and API functionality implemented in the previous modules.

Reactive Forms organize user input using FormControl and FormGroup. A FormControl represents an individual input field, while a FormGroup combines multiple controls into a single form object. This approach keeps the entire form structure inside the TypeScript component, making validation, data handling, and maintenance easier for large applications.

First, import the required Reactive Forms module.

import {

ReactiveFormsModule,

FormGroup,

FormControl,

Validators

} from '@angular/forms';

Create the Course Registration form.

courseForm = new FormGroup({

courseName: new FormControl('', Validators.required),

instructor: new FormControl('', Validators.required),

duration: new FormControl('', Validators.required)

});

Connect the form to the template.

<form [formGroup]="courseForm">

<input

type="text"

formControlName="courseName"

placeholder="Course Name">

<input

type="text"

formControlName="instructor"

placeholder="Instructor">

<input

type="text"

formControlName="duration"

placeholder="Duration">

</form>

Reactive Forms automatically synchronize user input with the component, allowing Angular to track form values, validation states, and user interactions in real time.

Validating user input ensures that only complete and accurate information is submitted. Angular provides built-in validators such as required, minLength, maxLength, and pattern to simplify validation.

Update the form.

courseForm = new FormGroup({

courseName: new FormControl('', [

Validators.required,

Validators.minLength(5)

]),

instructor: new FormControl('', Validators.required),

duration: new FormControl('', Validators.required)

});

Display validation messages.

<div *ngIf="courseForm.get('courseName')?.invalid &&

courseForm.get('courseName')?.touched">

Course name must contain at least 5 characters.

</div>

Disable the Register button until the form becomes valid.

<button [disabled]="courseForm.invalid">

Register Course

</button>

Validation improves the user experience by preventing incomplete or invalid course information from being submitted.

Some applications require users to enter a variable number of values. Angular provides **FormArray** to dynamically add or remove controls without changing the form structure.

Create a dynamic FormArray.

modules = new FormArray([

new FormControl('Introduction')

]);

Add a new course module.

addModule(){

this.modules.push(

new FormControl('')

);

}

Display the module fields.

<div formArrayName="modules">

<div *ngFor="let module of modules.controls; let i = index">

<input [formControlName]="i">

</div>

</div>

<button (click)="addModule()">

Add Module

</button>

Dynamic Forms allow users to add multiple course modules without modifying the page layout, making the Course Registration form flexible and suitable for real-world applications.