FormBuilder service in Angular

Introduction

The FormBuilder service helps you create forms easily in Angular. It saves time by building form controls and groups quickly.

When you want to create a form with multiple input fields.

When you need to group related form controls together.

When you want to add validation rules to form inputs.

When you want to manage form state like touched or dirty easily.

When you want to handle form submission and reset smoothly.

Syntax

Angular

constructor(private fb: FormBuilder) {}

this.myForm = this.fb.group({
  name: [''],
  email: [''],
  age: [null]
});

The fb.group() method creates a form group with controls.

Each control is defined as a key with an initial value inside an array.

Examples

A simple form group with two controls: username and password.

Angular

this.fb.group({
  username: [''],
  password: ['']
});

Form controls with validation rules for required email and minimum age.

Angular

this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  age: [null, Validators.min(18)]
});

Create a single form control with an initial value.

Angular

this.fb.control('default value');

Sample Program

This Angular component uses FormBuilder to create a form with name and email fields. It adds simple validation and shows messages if inputs are invalid. On submit, it logs the form values.

Angular

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

@Component({
  selector: 'app-simple-form',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input id="name" formControlName="name" />
      <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
        Name is required.
      </div>

      <label for="email">Email:</label>
      <input id="email" formControlName="email" />
      <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
        Enter a valid email.
      </div>

      <button type="submit" [disabled]="userForm.invalid">Submit</button>
    </form>
  `
})
export class SimpleFormComponent {
  userForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form Submitted:', this.userForm.value);
    }
  }
}

Important Notes

Always import ReactiveFormsModule in your Angular module to use FormBuilder.

Use formControlName in the template to connect inputs to form controls.

Validation errors appear only after the user touches the input to avoid confusion.

Summary

FormBuilder helps create forms quickly and cleanly in Angular.

It builds form groups and controls with initial values and validations.

Use it to manage form state and handle user input easily.