Grouping form controls

This section will now discuss how to group form controls in our application. Forms contain several related controls, which is why it is necessary to group them for a better structure. Reactive forms provide two ways to group form controls, as follows:

• Form group: Creates a form with a fixed set of form controls. Form groups can also contain another set of form groups to handle complex forms.
• Form array: Creates a form with dynamic form controls. It can add and remove form controls and at the same time can contain other form arrays to handle complex forms.

Creating form groups

Form groups allow us to control the values and status of form controls by groups. We can also access a single form control inside a form group using its name. To create a form group, let’s follow the next steps:

1. Let’s say we have a HeroComponent; for example, the first step is to import the FormGroup and FormControl classes from the @angular/forms...