What are the different ways to group form controls?

Reactive forms provide two ways of grouping multiple related controls.

1. FormGroup: It defines a form with a fixed set of controls those can be managed together in an one object. It has same properties and methods similar to a FormControl instance. This FormGroup can be nested to create complex forms as below.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css'],
})
export class UserProfileComponent {
  userProfile = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl(''),
    }),
  });

  onSubmit() {
    // Store this.userProfile.value in DB
  }
}

<form [formGroup]="userProfile" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" />
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName" />
  </label>

  <div formGroupName="address">
    <h3>Address</h3>

    <label>
      Street:
      <input type="text" formControlName="street" />
    </label>

    <label>
      City:
      <input type="text" formControlName="city" />
    </label>

    <label>
      State:
      <input type="text" formControlName="state" />
    </label>

    <label>
      Zip Code:
      <input type="text" formControlName="zip" />
    </label>
  </div>
  <button type="submit" [disabled]="!userProfile.valid">Submit</button>
</form>

2. FormArray: It defines a dynamic form in an array format, where you can add and remove controls at run time. This is useful for dynamic forms when you don’t know how many controls will be present within the group.

   import { Component } from '@angular/core';
   import { FormArray, FormControl } from '@angular/forms';
   
   @Component({
     selector: 'order-form',
     templateUrl: './order-form.component.html',
     styleUrls: ['./order-form.component.css'],
   })
   export class OrderFormComponent {
     constructor() {
       this.orderForm = new FormGroup({
         firstName: new FormControl('John', Validators.minLength(3)),
         lastName: new FormControl('Rodson'),
         items: new FormArray([new FormControl(null)]),
       });
     }
   
     onSubmitForm() {
       // Save the items this.orderForm.value in DB
     }
   
     onAddItem() {
       this.orderForm.controls.items.push(new FormControl(null));
     }
   
     onRemoveItem(index) {
       this.orderForm.controls['items'].removeAt(index);
     }
   }

   <form [formControlName]="orderForm" (ngSubmit)="onSubmit()">
     <label>
       First Name:
       <input type="text" formControlName="firstName" />
     </label>
   
     <label>
       Last Name:
       <input type="text" formControlName="lastName" />
     </label>
   
     <div>
       <p>Add items</p>
       <ul formArrayName="items">
         <li *ngFor="let item of orderForm.controls.items.controls; let i = index">
           <input type="text" formControlName="{{i}}" />
           <button type="button" title="Remove Item" (click)="onRemoveItem(i)">Remove</button>
         </li>
       </ul>
       <button type="button" (click)="onAddItem">Add an item</button>
     </div>
   </form>