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
  }
}

Need a 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
  }
}

Need a 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: ['']
    });
  }
}

Need a 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
}

Need a 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.