`FormArray`

Manages an ordered, dynamic list of form controls.

Since Angular 2+ Spec ↗

Syntax

new FormArray([FormControl, ...])

Parameters

Name	Type	Required	Description
`controls`	`AbstractControl[]`	No	Initial array of controls/groups.

Returns

FormArray — A control tracking a dynamic list.

Examples

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

@Component({
  selector: 'app-x',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <div [formGroup]="form">
      @for (c of tags.controls; track $index) {
        <input [formControl]="$any(c)" />
      }
    </div>
    <button (click)="add()">Add tag</button>
  `,
})
export class XComponent {
  tags = new FormArray<FormControl<string>>([]);
  form = new FormGroup({ tags: this.tags });
  add() {
    this.tags.push(new FormControl('', { nonNullable: true }));
  }
}

Notes

Use push, insert, removeAt, and clear to mutate the list; the array's value is an ordered array. Render with @for over `controls`. Ideal for repeatable inputs like tags or line items.