`FormGroup`

Aggregates multiple controls into a single keyed form object.

Since Angular 2+ Spec ↗

Syntax

new FormGroup({ key: FormControl, ... })

Parameters

Name	Type	Required	Description
`controls`	`object`	No	Map of control names to FormControl/FormGroup/FormArray.

Returns

FormGroup — A composite control tracking all children.

Examples

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

@Component({
  selector: 'app-x',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <input formControlName="name" />
      <input formControlName="email" />
      <button [disabled]="form.invalid">Save</button>
    </form>
  `,
})
export class XComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
  });
  submit() {
    console.log(this.form.value);
  }
}

Notes

Bind with `[formGroup]` on the form and `formControlName` on inputs. The group's value, valid, and errors aggregate its children. Use patchValue for partial updates and reset() to clear. FormBuilder offers a terser syntax.