Demo: FormArray with FormGroups

Now let's a create a FormArray containing FormGroups instead of FormControls. Each FormGroup will have 2 FormControls: a phone number and a phone type.

Changes in the Component:

To start, we’re going to rename createPhoneControl() to createPhoneGroup(), and instead, we’ll return a FormGroup(): createPhoneGroup() { return this.fb.group({ phoneNumber: '', phoneType: '' }); }

Since we want phoneTypes to be a select dropdown, we'll initialize the default values at the top of the component as a string array. phoneTypes: string[] = ['Mobile', 'Home', 'Other'];

We also need to add a method that updates the form when phoneType is updated. Let’s call it pickPhoneType(), which takes in an event that we’ll pass from the template. This will be the new phoneType value that the user selects. The patchValue() method allows us to partially update the form rather than update the entire form, like setValue() does. pickPhoneType(event): void { this.regForm.patchValue({phoneType: event.target.value}) }

Changes in the Template:

Inside the FormArray div, we'll add another div for the FormGroup and bind it to the index: [formGroupName]="i"

Each FormControl requires a directive of formControlName set to their associated FormControl keys. We'll add (change)=pickPhoneType($event) to the select tag to update on change. Finally, the option tag will iterate over the phoneTypes and property bind the type to [ngValue].