Sign in
Skip to solution
mediumFrontend

What is a FormArray?

339 views
01

Understand the problem

Explain FormArray.

formsformarray
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A FormArray manages a dynamic, indexed list of controls (or groups) — ideal for variable-length inputs like adding/removing multiple emails or rows. You push/removeAt controls and iterate them in the template.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A dynamic list of inputs
import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <div formArrayName="phones">
        <input *ngFor="let c of phones.controls; let i = index" [formControlName]="i" />
      </div>
      <button (click)="add()">Add phone</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({ phones: new FormArray([new FormControl('')]) });
  get phones() { return this.form.get('phones') as FormArray; }
  add() { this.phones.push(new FormControl('')); }   // dynamic
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 68 of 121 decoded in the Angular track. One more won't hurt.

Back to track