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…