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.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

03

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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.