Angular 34: FormArray — Dynamic Form Fields
easy⏱ 5 mincourseangular
FormArray: an ordered list of controls, not a fixed set of keys
Where FormGroup needs every field name known up front, FormArray just holds controls in a numbered list — perfect for 'add another' UIs: a list of phone numbers, todo items, or invoice line items whose count isn't known until the user decides.
phones = new FormArray([
new FormControl(''),
]);
// or, via FormBuilder:
form = this.fb.group({
phones: this.fb.array([this.fb.control('')]),
});
push() and removeAt(): growing and shrinking the list
phones.push(new FormControl('')) appends a fresh control to the end of the array; phones.removeAt(i) deletes the control at index i. Both mutate the FormArray in place and immediately update .controls, .value, and the array's own validity.
addPhone() {
this.phones.push(new FormControl(''));
}
removePhone(index: number) {
this.phones.removeAt(index);
}
Looping over .controls with @for, indexing formControlName
Inside a [formArrayName]="phones" (or a getter exposing the array), @for (phone of phones.controls; track $index) renders one row per control; since the entries have no natural key, $index doubles as both the track expression and the [formControlName]="$index" binding.