Angular FormArray Dynamic Forms

What is FormArray Dynamic Forms in Angular?

FormArray holds a list of controls or groups whose length changes at runtime — adding education rows, skills, or work-experience entries. You push and remove entries programmatically and iterate them in the template.

FormArray Dynamic Forms example

form = this.fb.group({
  name: [''],
  skills: this.fb.array([this.fb.control('', Validators.required)]),
});

get skills(): FormArray {
  return this.form.get('skills') as FormArray;
}

addSkill(): void {
  this.skills.push(this.fb.control('', Validators.required));
}

removeSkill(i: number): void {
  this.skills.removeAt(i);
}

Rendering it

<div formArrayName="skills">
  @for (ctrl of skills.controls; track $index) {
    <input [formControlName]="$index">
    <button type="button" (click)="removeSkill($index)">Remove</button>
  }
</div>
<button type="button" (click)="addSkill()">Add skill</button>

Key points to remember

• A getter cast to FormArray keeps the template readable and typed.
• Use formArrayName on the container and the numeric index as formControlName.
• For groups rather than single controls, use [formGroupName]="$index".

Common mistakes with FormArray Dynamic Forms

• Forgetting the formArrayName wrapper, so the indexed controls do not bind.
• Tracking by value in @for, which breaks when two entries hold the same text.