Managing Nested and Dynamic Forms in Angular
Tags: angular, reactiveforms, dynamicforms, javascript
Published: 2019-04-08 22:29:47

---
title: Managing Nested and Dynamic Forms in Angular
published: true
description: Learn how to use FormArray to dynamically add and remove FormGroups and FormControls in reactive forms.
tags: Angular, reactive forms, dynamic forms, JavaScript
---

Angulars ReactiveForms give us immense capabilities with its robust API, but the learning curve can be a bit steep from plain old template-driven forms that many are used to. This quick guide will explain Angular’s form elements and how to combine them, nest them, and dynamically create them in almost any scenario.

## AbstractControl

First, it’s important to know about __AbstractControl__, the class extended across most of the form elements we’ll be working with. It has multiple properties that manage everything from the validity state to what the parent element may be, and methods that allow us to mark the state of the control(touched, untouched, dirty, etc), enable/disable the control, get the value, set the value, etc. There’s a lot going in this class, so it’s handy to have it’s documentation available to refer to:

![Abstact Control](https://thepracticaldev.s3.amazonaws.com/i/zb3qs4ygz1406sanf5s8.png "Angular AbstractControl class")

## FormControl

The basic element of building Angular forms is the __FormControl__. This is a class that represents that input element on a page with a name value you’re likely used to seeing. Any piece of information we want to collect in a form, whether it’s an input, select, dropdown, or custom element needs to have a representative FormControl. The `[formControl]` directive is used to bind the input element in the DOM to it’s respective FormControl.

![FormControl](https://thepracticaldev.s3.amazonaws.com/i/s3kwoki3a8q0dqgarxgb.png "FormControl syntax")


FormControls can be initialized with a value, like ‘your name here’ in the above example, and enabled/disables status, and set any validators necessary.

## FormGroups

__FormGroup__ is the class that allows us to group a number of controls together. It also extends the AbstractControl class, meaning we can track the validity and value of all the FormControls in a FormGroup together. This allows us to easily manage our form as a whole. The `[formGroup]` directive binds the FormGroup to a DOM element.

![FormGroup](https://thepracticaldev.s3.amazonaws.com/i/r2ie92yxw6w9hnumo9r9.png "FormGroup of FormControls that disables the submit button if FormGroup is invalid and logs value of the form to the console on submit.")


## FormArray

__FormArray__ is a class that aggregates FormControls into an array, similar to FormGroup creating an object from FormControls. FormArrays can have controls pushed to them or removed from them similar to the way you’d manipulate an array in vanilla JS, and offer us a lot of power and flexibility when creating nested and dynamic forms.

![FormArray](https://thepracticaldev.s3.amazonaws.com/i/1e1wpkpx8vsw169pcou6.png "FormArray syntax")


In this example, we’re using an `ngFor` loop to iterate through `userForm.controls`, because `userForm` is a FormArray. In this FormArray are controls, so as we loop through the controls, we need to be sure to use the `[formGroup]` directive to bind each iteratee DOM element to it’s respective FormGroup instance.

## FormBuilder

Repeatedly typing `new FormControl('')`, `new FormGroup({})`, and `new FormArray([])` can become a bit tedious, especially when creating larger forms. Fortunately Angular has shorthand syntax we can use thanks to the __FormBuilder__ class.

![FormBuilder](https://thepracticaldev.s3.amazonaws.com/i/zst2prxm9k8jpr1t2vek.png "FormBuilder syntax")

Now that we have an understanding of the pieces we can build forms with, let’s look at building a more complex form example.

## Creating and Removing FormControls & FormGroups Dynamically

Let’s say we want to create a form that allows a user to create an unlimited number of users. This form will need to be able to allow a user to add new FormGroups to create additional users as needed, as well as remove FormGroups they don’t want. We use a FormArray to hold a FormGroups of FormControls for each user we want to create. To do this, we can use FormArray methods:

- An __`insert`__ method that takes two parameters, the index at which to insert, and the control to insert.
- A __`removeAt`__ method, which takes the index of the control to remove.

![Dynamically adding formgroups](https://thepracticaldev.s3.amazonaws.com/i/0arz0qr8obgnr8lepsoa.png "FormBuilder syntax")


Now we have a form that dynamically adds and removes FormGroups to allow the user to create as many users as they would like. With a thorough understanding of FormControl, FormGroup, and FormArray we can create any form structure to meet our data submissions needs.

To see working examples of all the code snippets shown above, take a look at the repo on stackblitz.

[https://stackblitz.com/github/tehfedaykin/angular-dynamic-forms](https://stackblitz.com/github/tehfedaykin/angular-dynamic-forms "Examples on Stackblitz")