Intro to Reactive Forms in Angular - Make Forms Dynamic


In this section, we'll cover the last of the three building blocks in @angular/forms, the FormArray. Like FormGroup, FormArray aggregates other controls, however it’s distinct because it allows us to be dynamic with how many child controls it has.

A good use case for a FormArray is when you have an indefinite number of child controls, and you want the flexibility to add or remove as many as needed. For example, let’s say you’re applying for a job and there’s a section that asks you to enter any relevant skills you have as separate fields. They don’t know how many skills you’ll put, so you want flexibility. Before submitting the application, you could add or remove as many skills as you want. A FormArray would allow us to do something like this. It provides a dynamic way to group together controls.

It’s worth noting that Form array aggregates an array of abstract controls, so that includes Form Controls, Form Groups, or even other Form Arrays. We'll start this section using FormArray with FormControls as the simplest case.