Chapter 8.2☕ 15 min read

FormControl, FormGroup, FormArray

Three building blocks of reactive forms: single input (FormControl), object group (FormGroup), and dynamic array (FormArray). Combine them for any form structure.

01FormControl — Single Input

FormControl is the basic building block — it tracks the value and validation state of a single input field.

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

// FormControl(initialValue, validators)
const name = new FormControl('Biryani', [
  Validators.required,
  Validators.minLength(3)
]);

// Properties
name.value        // 'Biryani'
name.valid        // true (passes required and minLength)
name.errors       // null (no errors)
name.setValue('Chicken Biryani');  // Programmatically set

"FormControl = ek plate — ek dish ka data."

Every FormControl holds:

A current value
Validation state (valid/invalid/errors)
Interaction state (touched/dirty/pristine)
An Observable of changes (valueChanges)

02FormGroup — Collection of Controls

FormGroup groups multiple FormControls into one object — like a form with multiple fields.

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

const biryaniForm = new FormGroup({
  name: new FormControl('', [Validators.required]),
  price: new FormControl(0, [Validators.min(1)]),
  category: new FormControl('chicken'),
});

"FormGroup = full thaali — multiple plates ek saath."

Template:

<form [formGroup]="biryaniForm">
  <input formControlName="name" placeholder="Biryani name" />
  <input type="number" formControlName="price" />
  <select formControlName="category">
    <option value="chicken">Chicken</option>
    <option value="mutton">Mutton</option>
  </select>
</form>

formGroup binds the FormGroup to the form element. formControlName binds each input to a control by its key name.

biryaniForm.value   // { name: '', price: 0, category: 'chicken' }
biryaniForm.valid   // true only if ALL controls are valid

03FormArray — Dynamic List of Controls

FormArray manages a dynamic list of controls — like adding multiple side orders.

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

const extras = new FormArray([
  new FormControl('Raita'),
  new FormControl('Salan'),
]);

"FormArray = side orders — jitne chahiye utne add karo."

Adding and removing dynamically:

// Add a new control
extras.push(new FormControl('Mirchi'));

// Remove at index
extras.removeAt(0);

// Clear all
extras.clear();

// Insert at position
extras.insert(1, new FormControl('Salad'));

// Get length
extras.length; // 3 (after push)

Template:

<div formArrayName="extras">
  @for (item of extras.controls; track $index) {
    <div>
      <input [formControl]="item" />
      <button (click)="extras.removeAt($index)">Remove</button>
    </div>
  }
</div>

Use cases: multiple phone numbers, dynamic tags, order items, team members.

04Nested Structure

You can nest FormGroups inside FormGroups and FormArrays inside FormGroups — creating complex form structures.

const orderForm = new FormGroup({
  customerName: new FormControl(''),
  
  // Nested FormGroup
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl('Hyderabad'),
    pincode: new FormControl(''),
  }),
  
  // FormArray
  orders: new FormArray([
    new FormGroup({
      item: new FormControl('', Validators.required),
      qty: new FormControl(1, [Validators.min(1)]),
    })
  ]),
});

"FormGroup ke andar FormGroup, FormArray ke andar FormGroup — matryoshka."

Template:

<form [formGroup]="orderForm">
  <input formControlName="customerName" />

  <div formGroupName="address">
    <input formControlName="street" />
    <input formControlName="city" />
    <input formControlName="pincode" />
  </div>

  <div formArrayName="orders">
    @for (order of orders.controls; track $index) {
      <div [formGroupName]="$index">
        <input formControlName="item" />
        <input formControlName="qty" />
      </div>
    }
  </div>
</form>

Access nested values with dot notation: this.form.get('address.city')?.value

05Getting and Setting Values

You can read and write values programmatically.

Getting values:

// Direct property
this.biryaniForm.value.name;

// Via get() — returns AbstractControl | null
this.biryaniForm.get('name')?.value;

// Nested
this.biryaniForm.get('address.city')?.value;

// FormArray item
this.biryaniForm.get('orders.0.item')?.value;

Setting values:

// Set a single control
this.biryaniForm.get('name')?.setValue('Chicken Dum Biryani');

// Partial update — only specified fields change
this.biryaniForm.patchValue({
  name: 'Mutton Biryani',
  price: 399
});

// Full update — ALL fields required, throws error if missing
this.biryaniForm.setValue({
  name: 'Chicken Biryani',
  price: 299,
  category: 'chicken'
});

"patchValue = partial update, setValue = full replace."

setValue — requires ALL controls in the group, throws error if any missing
patchValue — accepts partial object, only updates specified controls
reset — resets to initial values (or specified defaults)

Key Takeaways

✅ FormControl — single input (value, validators, state)
✅ FormGroup — object of controls, bind via [formGroup] + formControlName
✅ FormArray — dynamic list, push()/removeAt()/clear() at runtime
✅ Nest any combination: FormGroup → FormGroup, FormGroup → FormArray, FormArray → FormGroup
✅ setValue() requires ALL fields (strict), patchValue() accepts partial (flexible)

Previous8.1 — Reactive Forms Intro 📋 All Chapters Next Chapter8.3 — FormBuilder →