angular form builder

In Angular, FormBuilder is a service used to simplify creating reactive forms.

Basic idea

Instead of writing:

new FormGroup({
  name: new FormControl(''),
  email: new FormControl('')
})

you can write:

this.fb.group({
  name: [''],
  email: ['']
})

Example

Component

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      age: [null]
    });
  }

  onSubmit() {
    console.log(this.form.value);
  }
}

Template

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <label>
    Name:
    <input formControlName="name" />
  </label>

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

  <label>
    Age:
    <input type="number" formControlName="age" />
  </label>

  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>

Common FormBuilder methods

• group() → creates a FormGroup
• control() → creates a FormControl
• array() → creates a FormArray

Example of control()

title = this.fb.control('Hello', Validators.required);

Example of array()

tags = this.fb.array([
  this.fb.control('Angular'),
  this.fb.control('TypeScript')
]);

Notes

• FormBuilder is used with ReactiveFormsModule
• It helps reduce boilerplate
• You can still use new FormGroup() / new FormControl() directly if you want

If you want, I can also show:

1. nested form groups
2. dynamic form arrays
3. template-driven forms vs reactive forms