Dynamic Forms — Add/Remove Controls at Runtime

Let's build a complete dynamic order form — the most common use case.

import { Component, inject } from '@angular/core';
import { FormBuilder, Validators, FormArray, ReactiveFormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-dynamic-order',
  standalone: true,
  imports: [ReactiveFormsModule, JsonPipe],
  template: `
    <form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
      <h2>🍗 Biryani Order</h2>

      <!-- Customer name -->
      <div class="field">
        <label>Customer Name *</label>
        <input formControlName="customerName" placeholder="Your name" />
      </div>

      <!-- Dynamic Order Items -->
      <div formArrayName="items" class="items-section">
        <h3>Order Items</h3>

        @for (item of items.controls; track $index) {
          <div [formGroupName]="$index" class="order-item">
            <span class="item-num">#{{ $index + 1 }}</span>
            <input formControlName="name" placeholder="Biryani name" />
            <input formControlName="qty" type="number" min="1" class="qty" />
            <input formControlName="price" type="number" min="0" class="price" />
            <button type="button" (click)="removeItem($index)" 
                    [disabled]="items.length <= 1" class="remove-btn">✕</button>
          </div>
        }

        <button type="button" (click)="addItem()" class="add-btn">
          + Add Item
        </button>
      </div>

      <!-- Summary -->
      <div class="summary">
        <p>Total items: {{ items.length }}</p>
        <p>Total: ₹{{ getTotal() }}</p>
      </div>

      <button type="submit" [disabled]="orderForm.invalid" class="submit-btn">
        Place Order 🚀
      </button>
    </form>
  `
})
export class DynamicOrderComponent {
  private fb = inject(FormBuilder);

  orderForm = this.fb.group({
    customerName: ['', Validators.required],
    items: this.fb.array([]),
  });

  get items(): FormArray {
    return this.orderForm.get('items') as FormArray;
  }

  constructor() {
    this.addItem(); // Start with one item
  }

  addItem() {
    this.items.push(this.fb.group({
      name: ['', Validators.required],
      qty: [1, [Validators.required, Validators.min(1)]],
      price: [0, [Validators.required, Validators.min(0)]],
    }));
  }

  removeItem(index: number) {
    if (this.items.length > 1) {
      this.items.removeAt(index);
    }
  }

  getTotal(): number {
    return this.items.controls.reduce((total, group) => {
      const price = group.get('price')?.value || 0;
      const qty = group.get('qty')?.value || 0;
      return total + (price * qty);
    }, 0);
  }

  onSubmit() {
    if (this.orderForm.valid) {
      console.log('Order:', this.orderForm.value);
    }
  }
}

"Order items = jitne chahiye utne add karo, hatao bhi."

This pattern is used in every real-world Angular app that handles orders, invoices, surveys, or any dynamic list.