Explain FormArray.
01
01
Understand the problem
formsformarray
02
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
03
Study the solution
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
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
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.