FormBuilder service in Angular - Mini Project: Build & Apply

Building a Simple Contact Form with Angular FormBuilder Service

📖 Scenario: You are creating a contact form for a website. The form will collect a user's name, email, and message. You want to use Angular's FormBuilder service to make building the form easier and cleaner.

🎯 Goal: Build a reactive contact form using Angular's FormBuilder service with fields for name, email, and message.

📋 What You'll Learn

Create a reactive form group using FormBuilder

Include form controls: name, email, message

Initialize the form controls with empty strings

Use Angular's standalone component with reactive forms setup

💡 Why This Matters

🌍 Real World

Building forms is a common task in web apps for user input like contact forms, registration, and feedback. Using FormBuilder simplifies form creation and management.

💼 Career

Understanding Angular reactive forms and FormBuilder is essential for frontend developers working with Angular to create scalable and maintainable forms.

1

Set up the initial form group with FormBuilder

Import FormBuilder and FormGroup from @angular/forms. Create a standalone Angular component called ContactFormComponent with a public property contactForm of type FormGroup. Inject FormBuilder in the constructor and initialize contactForm as an empty form group using this.fb.group({}).

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [],
  template: ``,
})
export class ContactFormComponent {
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // Your code here
  }
}

Hint

Remember to import FormBuilder and FormGroup. Use this.fb.group({}) to create an empty form group.

2

Add form controls for name, email, and message

Update the contactForm initialization inside the constructor to include three form controls: name, email, and message. Initialize each control with an empty string ''.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [],
  template: ``,
})
export class ContactFormComponent {
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // Add form controls for name, email, and message
  }
}

Hint

Inside this.fb.group(), add keys name, email, and message each with an array containing an empty string.

3

Add the HTML template with form fields bound to the form controls

In the component's template, create a <form> element with [formGroup]="contactForm". Inside the form, add three <input> elements for name and email, and a <textarea> for message. Bind each input's formControlName to the respective control names: name, email, and message. Add a submit button with the text Send.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [],
  template: `
    
  `,
})
export class ContactFormComponent {
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      name: [''],
      email: [''],
      message: ['']
    });
  }
}

Hint

Use [formGroup]="contactForm" on the form tag. Bind each input and textarea with formControlName matching the control names.

4

Add form submission handler and disable button when form is invalid

Add a method onSubmit() in the component that logs the form value to the console. Add (ngSubmit)="onSubmit()" to the <form> tag. Disable the Send button when the form is invalid using [disabled]="contactForm.invalid". Import CommonModule for ngSubmit support and add it to the imports array.

Angular

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    
      
      Send
    
  `,
})
export class ContactFormComponent {
  contactForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      name: [''],
      email: [''],
      message: ['']
    });
  }

  // Your code here
}

Hint

Add (ngSubmit)="onSubmit()" to the form tag. Create an onSubmit() method that logs this.contactForm.value. Disable the submit button when the form is invalid.

Practice

1. What is the main purpose of Angular's FormBuilder service?

easy

A. To send form data directly to the server

B. To style forms with CSS classes automatically

C. To create reactive forms easily with less code

D. To generate HTML form elements dynamically

Solution

1. Step 1: Understand FormBuilder's role

   FormBuilder is a service in Angular that helps create reactive forms quickly and cleanly.

2. Step 2: Compare options with FormBuilder's purpose

   Only To create reactive forms easily with less code correctly describes that FormBuilder helps build forms easily with less code.

3. Final Answer:

   To create reactive forms easily with less code -> Option C

4. Quick Check:

   FormBuilder = create reactive forms easily [OK]

Hint: FormBuilder builds forms, not styles or sends data [OK]

Common Mistakes:

• Confusing FormBuilder with styling tools
• Thinking FormBuilder sends data to server
• Assuming FormBuilder creates HTML elements

2. Which of the following is the correct way to inject FormBuilder in an Angular component constructor?

easy

A. constructor(private fb = new FormBuilder()) {}

B. constructor(private fb: FormBuilder) {}

C. constructor(FormBuilder fb) {}

D. constructor(fb: FormBuilder) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular injects services by declaring them as private/public in the constructor with type.

2. Step 2: Identify correct syntax for FormBuilder injection

   constructor(private fb: FormBuilder) {} uses correct TypeScript and Angular DI syntax: private fb: FormBuilder.

3. Final Answer:

   constructor(private fb: FormBuilder) {} -> Option B

4. Quick Check:

   Inject FormBuilder with private and type [OK]

Hint: Use private and type in constructor for DI [OK]

Common Mistakes:

• Using new keyword inside constructor
• Missing access modifier (private/public)
• Incorrect parameter order or syntax

3. Given this code snippet, what will be the initial value of the form control named email?

this.form = this.fb.group({
  email: ['[e-mail]'],
  password: ['']
});

medium

A. '[e-mail]'

B. undefined

C. null

D. An empty string

Solution

1. Step 1: Understand FormBuilder group initialization

   The email control is initialized with the array containing the string '[e-mail]'.

2. Step 2: Identify initial value of the control

   The first element in the array is the initial value, so the email control starts with '[e-mail]'.

3. Final Answer:

   '[e-mail]' -> Option A

4. Quick Check:

   Initial control value = first array element [OK]

Hint: First array item is initial form control value [OK]

Common Mistakes:

• Assuming empty string as default
• Confusing null or undefined as initial value
• Ignoring array syntax for initial value

4. What is wrong with this Angular FormBuilder code?

this.form = this.fb.group({
  username: '',
  age: this.fb.control(0)
});

medium

A. Age control cannot have initial value 0

B. Mixing shorthand and explicit control creation causes error

C. Cannot use this.fb.control inside group

D. Missing array brackets for username control initialization

Solution

1. Step 1: Check FormBuilder group syntax rules

   Each control should be initialized with an array or a FormControl instance.

2. Step 2: Identify issue with username control

   Username is initialized as a string directly, missing array brackets or FormControl wrapper.

3. Final Answer:

   Missing array brackets for username control initialization -> Option D

4. Quick Check:

   Controls need array or FormControl, not plain string [OK]

Hint: Use array or FormControl for each control in group [OK]

Common Mistakes:

• Using plain values without array or FormControl
• Thinking mixed syntax causes error
• Believing zero is invalid initial value

5. You want to create a form with name and email controls using FormBuilder. The email must be required and valid email format. Which code correctly sets up this form with validators?

hard

A. this.form = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] });

B. this.form = this.fb.group({ name: ['', Validators.email], email: ['', Validators.required] });

C. this.form = this.fb.group({ name: ['', [Validators.required, Validators.email]], email: ['', Validators.required] });

D. this.form = this.fb.group({ name: ['', []], email: ['', Validators.email] });

Solution

1. Step 1: Understand validator requirements

   Name must be required; email must be required and valid email format.

2. Step 2: Check each option's validators

   this.form = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); correctly applies Validators.required to name and both Validators.required and Validators.email to email.

3. Final Answer:

   this.form = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); -> Option A

4. Quick Check:

   Required + email validators on email control [OK]

Hint: Use array for multiple validators on a control [OK]

Common Mistakes:

• Swapping validators between controls
• Not using array for multiple validators
• Missing required validator on email