The NgModelGroup directive

We can group the form controls into the control group. The form itself is a control group. It is possible to track the validity state of the controls in the group. Like the control uses a ngModel directive, the group utilizes a NgModelGroup directive:

<form #myForm="ngForm" (ngSubmit)="handle(myForm.value)">
    <fieldset ngModelGroup="user">
        <label>User Name:</label>
        <input type="text" name="name" ngModel>
        <label>Password:</label>
        <input type="password" name="password" ngModel>
    </fieldset>
    <fieldset ngModelGroup="contact">
        <label>Phone:</label>
        <input type="text" name="phone" ngModel>
        <label>Email:</label>
        <input type="email" name="email" ngModel>
    </fieldset>
    <button type="submit">Submit</button>
</form>
We can use fieldset or div elements to group controls. With the help of ngModelGroup, we semantically group controls into user and contact information:

{
  user: {
    name: 'User',
    password: 'myPassword'
  },
  contact: {
    phone: '000-111-22-33',
    email: 'test@test.com'
  }
}