Dynamic Nested Reactive Forms In Angular

When A Normal Form Won’t Cut It.

When you think about it, most apps are just forms. Lots and lots of forms. Sometimes those forms need to contain a lot of data. Some even need to be… *gulp*… dynamic. Meaning that the structure of the form can change depending on the user. The server will never know exactly what it’s getting. When this is the case you might need to tap into the power of nested forms. That’s exactly what I’m going to cover here.

Let’s go over our goals.

By the end of this article we want to have a “parent” form that will contain an indeterminate amount of “child” forms. We will build an NBA team management app to demonstrate how this works. In order to do that we will cover the following concepts:

• Share a single parent form for submitting
• Handling CRUD operations from a single point
• Dynamically insert and remove child forms in/from a parent form
• Compose validation statuses

Okay, let’s do this!

First things first. You need to know why this pattern is useful so that you know when it’s appropriate to use. In order to really understand the inner-workings of this pattern you need to fully understand how Angular’s Reactive Forms work. The best place to find out is here but, we will briefly cover some basics.

Angular forms are made up of a few different classes that you can create with the Form-builder class. This is the tool you can use to create the different pieces of the form. These pieces are as follows:

Form

• Has built-in CRUD methods

Form Group

• The main wrapper of the form
• Can contain any type of form element

Form Array

• Can contain any type of form elements
• Has array-like methods to update children
• This is where the magic happens!

Form Control

• The main building block of forms. Allows for user interaction