Explain FormArray for Dynamic Lists in Angular

52 / 100

Formsintermediate

FormArray for Dynamic Lists

Explain how FormArray manages a dynamic, variable-length collection of form controls.

FormArray is the reactive forms building block for a collection of controls whose count isn't fixed at design time — a list of phone numbers a user can add or remove, dynamic line items on an invoice, tags on a post. Unlike FormGroup, which has a fixed, named set of child controls, FormArray holds its children in an ordered, index-based array, and exposes methods (push, removeAt, insert, clear) to change that collection's shape at runtime.

A FormGroup is like a form with permanently printed field labels; a FormArray is like a stack of blank index cards you can add to or pull from the pile at will, each card capable of holding a simple note or an entire filled-out sub-form.

Key Concepts

Each element of a FormArray can itself be any AbstractControl — a plain FormControl for a simple list of strings, or a nested FormGroup for a list of more complex objects (like an array of address form groups, each with its own street/city/zip controls) — which is what makes FormArray genuinely powerful for dynamic forms rather than just dynamic lists of primitives.

FormArrayAbstractControlFormControlFormGroup

In the template, iterating a FormArray typically uses @for/*ngFor over formArray.controls, binding each iteration's control by index via [formControlName]="i" (when nested inside a formArrayName directive) rather than by a fixed name, since there's no static name to bind to for a dynamically-sized collection.

FormArray@for*ngForformArray.controls[formControlName]="i"

A common interview follow-up is how to type a FormArray properly with Angular's typed reactive forms (FormArray<FormControl<string>> for a simple list, or FormArray<FormGroup<{...}>> for a list of structured objects), since getting this type parameter right is what lets TypeScript actually catch mistakes when pushing new controls onto the array.

FormArrayFormArray<FormControl<string>>FormArray<FormGroup<{...}>>