How to Use FormGroup in Angular: Simple Guide with Examples

In Angular, FormGroup is used to group multiple form controls into a single object for easier management and validation. You create a FormGroup by importing it from @angular/forms and defining controls inside it. This helps you track the form's value and validation state as a whole.

Syntax

The FormGroup is created by passing an object where keys are control names and values are FormControl instances. You import FormGroup and FormControl from @angular/forms.

Each FormControl manages the value and validation of a single input.

typescript

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

const myForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  email: new FormControl('')
});

Example

This example shows a simple Angular component using FormGroup to manage a form with three fields. It also demonstrates how to access form values and check if the form is valid.

typescript

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

@Component({
  selector: 'app-profile-form',
  template: `
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
      <label for="firstName">First Name:</label>
      <input id="firstName" formControlName="firstName" />

      <label for="lastName">Last Name:</label>
      <input id="lastName" formControlName="lastName" />

      <label for="email">Email:</label>
      <input id="email" formControlName="email" />

      <button type="submit" [disabled]="!profileForm.valid">Submit</button>
    </form>
    <p *ngIf="submitted">Form Submitted! Value: {{ formValue }}</p>
  `
})
export class ProfileFormComponent {
  profileForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email])
  });

  submitted = false;
  formValue = '';

  onSubmit() {
    if (this.profileForm.valid) {
      this.submitted = true;
      this.formValue = JSON.stringify(this.profileForm.value);
    }
  }
}

Output

A form with three input fields (First Name, Last Name, Email) and a submit button that is disabled until all fields are valid. On submit, it shows 'Form Submitted! Value: {"firstName":"...","lastName":"...","email":"..."}'.

Common Pitfalls

• Not importing ReactiveFormsModule in your Angular module, which is required to use FormGroup.
• Forgetting to bind the form in the template with [formGroup] directive.
• Using formControlName without a matching control in the FormGroup.
• Not initializing controls properly, leading to undefined errors.

typescript

/* Wrong: Missing ReactiveFormsModule import in app.module.ts */
// This causes errors when using FormGroup in templates

/* Right: Import ReactiveFormsModule */
import { ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

Quick Reference

FormGroup key points:

• Groups multiple FormControl instances.
• Tracks overall form value and validation state.
• Use formGroup directive in templates to bind.
• Access controls via formGroup.get('controlName').
• Use validators to enforce rules on controls.

Key Takeaways

Import ReactiveFormsModule to use FormGroup in Angular templates.

Create FormGroup by grouping FormControl instances with optional validators.

Bind FormGroup to your form using [formGroup] directive in the template.

Use formControlName to connect inputs to FormGroup controls.

Check form validity and access form values via FormGroup properties.