Using FormArray in Angular 19

February 22, 2025

In this article, I will discuss how to use FormArray in our Angular 19 application. FormArray tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances.

1. Create FormArray

FormArray can be created using new FormArray([]).
FormArray can also be created using FormBuilder using its array([]) method.
Find the code.
TS

this.libraryForm = new FormGroup({
  books: new FormArray<FormControl>([new FormControl(''), new FormControl(''), new FormControl('')]),
});
get books() {
  return this.libraryForm.get('books') as FormArray;
}

HTML

<div formArrayName="books">
  @for(b of books.controls; track b; let i = $index) {
		<p>
			<input [formControlName]="i">
		</p>
  }
</div>

2. Get Data

To fetch FormArray value, use its value property.

get books() {
  return this.libraryForm.get('books') as FormArray;
}
onFormSubmit() {
  console.log(this.books.value);
}

3. Update Value by Index

To update a control value within FormArray, first access that control by index using FormArray.at(index) method. Then call setValue() method.

setBookByIndex() {
   const i = 1;
   const control = this.books.at(i);
   control.setValue('XYZ');
}

4. Create FormGroup inside FormArray

Find the code to create FormGroup within a FormArray.
TS

ngOnInit() {
  this.libraryForm = new FormGroup({
    librarians: new FormArray<FormGroup>([new FormGroup({
      id: new FormControl('', [Validators.required]),
      name: new FormControl('', [Validators.required]),
      city: new FormControl('')
    })])
  });
}

HTML

<div formArrayName="librarians">
	@for(l of librarians.controls; track l; let i = $index) {
	<div [formGroupName]="i">
		<p><b>Librarian:  {{i+1}} </b></p>
		<p> Id: <input formControlName="id"> </p>
		<p> Name: <input formControlName="name"> </p>
		<p> City: <input formControlName="city"> </p>
	</div>
	}
</div>

5. Complete Example

library.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, ReactiveFormsModule, FormControl, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  imports: [ReactiveFormsModule],
  templateUrl: './library.component.html',
})
export class LibraryComponent implements OnInit {
  libraryForm!: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.libraryForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      books: new FormArray<FormControl>([new FormControl(''), new FormControl(''), new FormControl('')]),
      librarians: new FormArray<FormGroup>([new FormGroup({
        id: new FormControl('', [Validators.required]),
        name: new FormControl('', [Validators.required]),
        city: new FormControl('')
      })])
    });
  }
  onFormSubmit() {
    console.log(this.libraryForm.value);
    this.libraryForm.reset();
  }
  addBook() {
    this.books.push(new FormControl());
  }
  addLibrarian() {
    this.librarians.push(new FormGroup({
      id: new FormControl('', [Validators.required]),
      name: new FormControl('', [Validators.required]),
      city: new FormControl('')
    }));
  }
  get books() {
    return this.libraryForm.get('books') as FormArray;
  }
  get librarians() {
    return this.libraryForm.get('librarians') as FormArray;
  }
  resetControl(i: number) {
    this.books.at(i).reset();
  }

  setBookByIndex() {
    const i = 1;
    const control = this.books.at(i);
    control.setValue('XYZ');
  }
  removeBook(i: number) {
    this.books.removeAt(i);
  }
}

library.component.html

<form [formGroup]="libraryForm" (ngSubmit)="onFormSubmit()">
	<p>Name: <input formControlName="name"></p>
	Books:
	<div formArrayName="books">
		@for(b of books.controls; track b; let i = $index) {
		<p>
			<input [formControlName]="i">
			<button type="button" (click)="resetControl(i)">Reset</button>
			<button type="button" (click)="removeBook(i)">Remove</button>
		</p>
		}
	</div>
	Librarians:
	<div formArrayName="librarians">
		@for(l of librarians.controls; track l; let i = $index) {
		<div [formGroupName]="i">
			<p><b>Librarian: {{i+1}} </b></p>
			<p> Id: <input formControlName="id"> </p>
			<p> Name: <input formControlName="name"> </p>
			<p> City: <input formControlName="city"> </p>
		</div>
		}
	</div>
	<p><button>Submit</button></p>
	<p><button type="button" (click)="setBookByIndex()">Set Value</button></p>
	<p><button type="button" (click)="addBook()">Add More Book</button></p>
	<p><button type="button" (click)="addLibrarian()">Add More Librarian</button></p>
</form>

Output

6. Reference

FormArray