FormArray and Dynamic Fields
Add and remove form controls at runtime.
FormArray and Dynamic Fields is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Dynamic Field Sets
Some forms have a variable number of fields, such as a list of phone numbers or line items. FormArray manages an ordered, growable collection of controls.
Creating a FormArray
A FormArray holds an array of controls or groups.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);Inside a FormGroup
Embed the array in a parent group so it is part of the whole form value.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Adding Controls
Call push to append a new control dynamically.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Removing Controls
Use removeAt(index) to delete a specific control.
removePhone(i: number) {
this.phones.removeAt(i);
}Rendering with @for
Iterate the array's controls in the template, binding each by index with formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>The formArrayName Directive
formArrayName links a template block to the array, and the inner formControlName uses the numeric index.
Arrays of Groups
For richer items, store FormGroups in the array, e.g. each contact with a name and number.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Rendering Group Items
Use formGroupName with the index for each group in the array.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Reading the Value
The array value is a plain array, in order, reflecting current controls.
const list = this.phones.value; // string[]Clearing the Array
clear() removes all controls at once, handy when resetting a dynamic section.
this.phones.clear();Quick Check
Test your understanding of FormArray.
Recap
You learned that FormArray manages a dynamic, ordered collection of controls or groups, using push, removeAt, and clear, rendered with formArrayName plus indexed formControlName/formGroupName.
Frequently asked questions
Is the “FormArray and Dynamic Fields” lesson free?
Yes — the full text of “FormArray and Dynamic Fields” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “FormArray and Dynamic Fields”?
Add and remove form controls at runtime. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “FormArray and Dynamic Fields” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Typed Reactive Forms
- FormArray and Dynamic Fields
- Async Validators
- FormBuilder Patterns