🧠 Angular Reactive Forms: FormControl, FormGroup, and FormArray Explained

Angular’s Reactive Forms module provides a powerful, scalable way to handle user input with a model-driven approach. At the core of reactive forms are three key building blocks:

• FormControl

• FormGroup

• FormArray

If you're building dynamic or complex forms in Angular, understanding how these work—and how they relate—is essential.

Let’s break each one down.

🔹 FormControl

A FormControl represents a single input field in your form.

It tracks both the value of the input and its validation status.

Key Features:

• Tracks individual input states like:

  • pristine / dirty

  • touched / untouched

  • valid / invalid

🔹 FormGroup

A FormGroup is a collection of FormControls, grouped together logically.

Why use FormGroup?

• Manages related inputs as a unit (e.g., user profile)

• Tracks overall value and validity

• If any control is invalid, the group is invalid

🔹 FormArray

FormArray is for managing dynamic lists of controls (like a list of skills or hobbies).

Use Case:

• Ideal when the number of inputs changes dynamically

• Can contain FormControls, FormGroups, or nested FormArrays

✅ What They All Have in Common

All three inherit from AbstractControl, so they share useful methods and properties:

Property / Method

Purpose

Applies To

.value

Get current value

✅

.valid

Check if valid

✅

.status

'VALID', 'INVALID', etc.

✅

.errors

Validation error object

✅

.setValue()

Set exact value

✅

.patchValue()

Set partial value

✅

.reset()

Reset value and state

✅

.markAsTouched()

Mark control as touched

✅

🔧 Angular Reactive Forms in Action: Code Example

Let’s look at a real example using FormControl, FormGroup, and FormArray in a basic Angular component.

📄 app.component.ts

import { Component } from '@angular/core';

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

})

export class AppComponent {

// FormControl

nameControl = new FormControl('John Doe', [Validators.required]);

// FormGroup

profileForm = new FormGroup({

name: new FormControl('John Doe', Validators.required),

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

});

// FormArray

hobbiesArray = new FormArray([

new FormControl('Reading', Validators.required),

new FormControl('Writing', Validators.required)

]);

checkStatus() {

console.log('--- FormControl ---');

console.log('Value:', this.nameControl.value);

console.log('Valid:', this.nameControl.valid);

console.log('Errors:', this.nameControl.errors);

console.log('--- FormGroup ---');

console.log('Value:', this.profileForm.value);

console.log('Valid:', this.profileForm.valid);

console.log('Errors:', this.profileForm.errors);

console.log('--- FormArray ---');

console.log('Value:', this.hobbiesArray.value);

console.log('Valid:', this.hobbiesArray.valid);

console.log('Errors:', this.hobbiesArray.errors);

this.nameControl.markAsTouched();

this.profileForm.markAllAsTouched();

this.hobbiesArray.markAllAsTouched();

}

updateValues() {

this.nameControl.setValue('Jane Doe');

this.profileForm.patchValue({ email: 'jane@example.com' });

this.hobbiesArray.at(0).setValue('Cycling');

}

resetAll() {

this.nameControl.reset();

this.profileForm.reset();

this.hobbiesArray.reset();

}

}

🖼️ app.component.html

<h2>FormControl</h2>

<input [formControl]="nameControl">

<div *ngIf="nameControl.invalid && nameControl.touched">

Name is required

</div>

<h2>FormGroup</h2>

<form [formGroup]="profileForm">

<input formControlName="name" placeholder="Name">

<input formControlName="email" placeholder="Email">

</form>

<h2>FormArray</h2>

<div *ngFor="let hobby of hobbiesArray.controls; let i = index">

<input [formControl]="hobby">

</div>

<button (click)="checkStatus()">Check Status</button>

<button (click)="updateValues()">Update Values</button>

<button (click)="resetAll()">Reset</button>

📌 Summary

• FormControl is for individual inputs.

• FormGroup is for logically grouped inputs.

• FormArray is for dynamic lists of inputs.

• All three extend AbstractControl and share powerful APIs.

By understanding and using these properly, you can create flexible, dynamic, and maintainable forms in Angular.

📬 Subscribe to get more Angular deep dives, tips, and real-world examples in your inbox.

💬 Have feedback or want to share how you're using reactive forms? Hit reply—I'd love to hear from you!