Back to the homepage
Angular

Nested forms with ControlContainer

Are you creating a nested form? Do you want individual form steps to appear on different routing paths? If so, then this post will come in handy. Experience the power of the ControlContainer!

The article is based on Jennifer Wadell’s speech at ngConf in 2020, of which we were a partner. Unfortunately, the speech has not yet been made available on the official ng-Conf YouTube channel. As soon as it appears, it will be attached to this article.

ControlContainer

As we can read in the documentation“ControlContainer is a base class for directives that contain multiple registered instances of NgControl“. For example, FormGroup, is a type of directive. Looking at the source code, we will notice that it provides itself as a ControlContainer.

After applying the previously mentioned directive to any DOM element, we will be able to inject the ControlContainer (in this case being an instance of FormGroupDirective) inside this element and its child component. This is all the result of the resolution of dependencies by  ElementInjector.

Implementation

The use of ControlContainer will be presented in the example of a form for order placement. It consists of two steps:

  1. providing the shipping address
  2. providing credit card information for payment

Each step is on a different routing path.

Implementation starts with the parent component, inside which the instance of our form will be kept.

This initiates the form, which will then be passed to the [formGroup] directive superimposed on the form element in the view. Inside <form> in place of <router-outlet>  the appropriate step of the form will be displayed depending on the path on which we are located.

 

Then, to the child component, which is a representative of one of the steps, the ControlContainer will be injected, through which we can access the [formGroup] directive from the parent. The rest is only a formality. From the obtained instance of  FormGroupDirective,  we download the form field we are interested in and associate it with our view.

Depending on your preferred way of implementing and reusing components, you can use ControlContainer in two ways:

  • by selecting the form field you are interested in, on the child component level:

However, this solution obliges you to name the downloaded field in the child component the same throughout the application.

  • transmit directly to the child’s field, in which it will be used. Here, from the parent level, we control which form field our child will access:

Where selectedStep, in this case, creditCard or address depending on the path on which we are located.

In this simple way, we have implemented multi-step forms, on different routes.

Source code for a complete solution: https://stackblitz.com/edit/angular-love-ccZ

I also encourage you to familiarize yourself with the interesting use of ControlContainer, which has been presented by Netanel Basal on his blog.

About the author

Mateusz Stefańczyk

Mateusz is an avid editor of angular.love. In the portal for many years. A fan of all types of consoles and india games. He is a football fan – both real and virtual. Every weekend, he gets comfortable in his armchair, fastens his seat belt, and enjoys the European football games.

Do you want to create articles for our blog together with us? Join us and create valuable content for Angular fans with Angular.love!

Leave a Reply

Your email address will not be published. Required fields are marked *