Implementing Complex Forms with Reactive Form Arrays

This is definitely one of the most requested from the readers of the first edition of the Angular Cookbook. In this recipe, we’ll work with Reactive Forms and specifically, the FormArray class from Reactive Forms. We’re going to implement a complex form which has a list of projects that can be submitted with the forms. The user will be able to add as many projects as they want and will be able to remove the ones they don’t want.

Getting ready

The app that we are going to work with resides in start/apps/chapter08/ng-form-arrays inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-form-arrays to serve the project

This should open the app in a new browser tab. And you should see the following:

Figure 8.13 – Reactive Form Arrays app running on http://localhost:4200

Now that we have the app running...