What is a FormArray? | Interview Question

Q: What is a FormArray?

**Target Audience:** Developers who know FormGroup and FormControl and now need a form whose number of fields changes at runtime. **Difficulty:** Easy to Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The values in sections 5 and 6 were printed on Angular 22.2.3: the runnable example compiled with ngc in strict mode, booted in jsdom and clicked through by a driver, and a script calling every FormArray method directly. ## 1. Why This Even Matters — A Story First A paper registration form has fixed boxes: name, email, date of birth. Every attendee fills in the same boxes, so the form can be printed in advance. Now picture a **guest list** at the bottom of a party invitation. One person brings nobody, another brings five. You cannot print a box for each possible guest, so the form has an **"add another guest"** line that you can repeat as often as you need, and a way to cross a

The problem

Question presented to candidate: "An event-booking form lets the user add any number of guests, each with a name and a meal choice, and remove them again. What is a FormArray, and how would you build this with it?"

What a strong answer should cover:

A FormArray is a reactive-forms container that holds an ordered list of controls addressed by index, for repeating fields whose count is not known up front.
Items can be FormControls or whole FormGroups; the array's value is an array of their values, and its status aggregates the children (one invalid row makes the array invalid).
Mutation API: push, insert, removeAt (accepts negative indexes), setControl, clear, at, length.
Template wiring: formArrayName on a wrapper, [formGroupName]="i" per row, rendered with @for and a stable track (the control object).
Typed arrays (FormArray<FormGroup<{...}>>), plus validating the list itself: Validators.required means "at least one item", while Validators.minLength(1) does not catch an empty array.
Contrast with FormGroup (fixed named keys) and FormRecord (dynamic string keys).

Clarifying questions expected:

"Is there a minimum or maximum number of guests?"
"Do rows need stable identity, for example to keep focus or animations when one in the middle is removed?"

Code / implementation expected: Yes — a FormArray of FormGroups with add and remove buttons, showing the value after each change.

forms
formarray

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know FormGroup and FormControl and now need a form whose number of fields changes at runtime. Difficulty: Easy to Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The values in sections 5 and 6 were printed on Angular 22.2.3: the runnable example compiled with ngc in strict mode, booted in jsdom and clicked through by a driver, and a script calling every FormArray method directly.

1. Why This Even Matters — A Story First

A paper registration form has fixed boxes: name, email, date of birth. Every attendee fills in the same boxes, so the form can be printed in advance.

Now picture a guest list at the bottom of a party invitation. One person brings nobody, another brings five. You cannot print a box for each possible guest, so the form has an "add another guest" line that you can repeat as ofte

The solution is hidden so you can try first

8 min read · 10 sections

Read the code

AngularA guest list built with a typed FormArray of FormGroups: add, edit and remove rows

Open in playground

import { Component, signal } from "@angular/core";
import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";

type Guest = FormGroup<{ name: FormControl<string>; meal: FormControl<string> }>;

@Component({
  selector: "app-root",
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <div formArrayName="guests">
        @for (guest of guests.controls; track guest; let i = $index) {
          <div class="row" [formGroupName]="i">
            <input class="name" formControlName="name" placeholder="name" />
            <input class="meal" formControlName="meal" placeholder="meal" />
            <button type="button" class="remove" (click)="remove(i)">x</button>
          </div>
        }
      </div>
      <button type="button" id="add" (click)="add()">Add guest</button>
    </form>
    <p id="out">{{ out() }}</p>
  `,
})
export class AppComponent {
  form = new FormGroup({
    event: new FormControl("Launch party", { nonNullable: true }),
    // A FormArray holds an ordered list of controls: here, one FormGroup per guest.
    // Validators.required on an array means "at least one item" (minLength(1) would NOT catch an empty array).
    guests: new FormArray<Guest>([this.guest("Ada", "veg")], { validators: Validators.required }),
  });
  out = signal("");

  constructor() {
    this.form.valueChanges.subscribe(() => this.snapshot());
    this.snapshot();
  }

  get guests() {
    return this.form.controls.guests;
  }

  guest(name = "", meal = "standard"): Guest {
    return new FormGroup({
      name: new FormControl(name, { nonNullable: true, validators: Validators.required }),
      meal: new FormControl(meal, { nonNullable: true }),
    });
  }

  add() {
    this.guests.push(this.guest());
  }

  remove(i: number) {
    this.guests.removeAt(i);
  }

  snapshot() {
    this.out.set("length=" + this.guests.length + " status=" + this.form.status + " value=" + JSON.stringify(this.form.value.guests) + " arrayErrors=" + JSON.stringify(this.guests.errors));
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.