FormArray for dynamic fields in Angular

Introduction

FormArray helps you manage a list of form controls that can grow or shrink. It is useful when you want users to add or remove fields dynamically.

When you want users to add multiple email addresses or phone numbers.

When you need a form where users can add or remove items like tasks or tags.

When the number of inputs is not fixed and depends on user actions.

When you want to validate a group of similar inputs together.

When building surveys or questionnaires with variable numbers of answers.

Syntax

Angular

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

const form = new FormGroup({
  items: new FormArray([
    new FormControl('')
  ])
});

// To add a new control dynamically
(form.get('items') as FormArray).push(new FormControl(''));

// To remove a control
(form.get('items') as FormArray).removeAt(index);

FormArray holds an array of FormControl or FormGroup instances.

You can add or remove controls dynamically using push() and removeAt().

Examples

This creates an empty FormArray with no controls.

Angular

const emails = new FormArray([]);
// Empty FormArray initially

FormArray starts with one control holding an email string.

Angular

const emails = new FormArray([
  new FormControl('[e-mail]')
]);
// FormArray with one email control

Use push() to add a new control dynamically.

Angular

emails.push(new FormControl('[e-mail]'));
// Adds a new email control to the FormArray

Use removeAt() to remove a control by its index.

Angular

emails.removeAt(0);
// Removes the first control from the FormArray

Sample Program

This Angular component creates a form with a dynamic list of email inputs. Users can add or remove email fields. The form value updates live and shows all emails entered.

Angular

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

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="form">
      <div formArrayName="emails">
        <div *ngFor="let emailControl of emails.controls; let i = index">
          <input [formControlName]="i" placeholder="Email {{i + 1}}" aria-label="Email {{i + 1}}" />
          <button type="button" (click)="removeEmail(i)" aria-label="Remove email {{i + 1}}">Remove</button>
        </div>
      </div>
      <button type="button" (click)="addEmail()">Add Email</button>
    </form>
    <pre>{{ form.value | json }}</pre>
  `
})
export class DynamicFormComponent {
  form = new FormGroup({
    emails: new FormArray([
      new FormControl('')
    ])
  });

  get emails() {
    return this.form.get('emails') as FormArray;
  }

  addEmail() {
    this.emails.push(new FormControl(''));
  }

  removeEmail(index: number) {
    this.emails.removeAt(index);
  }
}

Important Notes

Adding or removing controls updates the form state and validation automatically.

Time complexity for adding/removing is O(1) because it just changes the array.

Common mistake: forgetting to cast with as FormArray when accessing the FormArray controls.

Use FormArray when you have a list of similar inputs that can change size. Use FormGroup for fixed sets of controls.

Summary

FormArray manages a dynamic list of form controls.

You can add or remove controls easily with push() and removeAt().

It is perfect for forms where users add multiple similar inputs like emails or tags.