FormGroup for grouping controls in Angular - Mini Project: Build & Apply

FormGroup for grouping controls

📖 Scenario: You are building a simple user registration form in Angular. You want to group the user's first name and last name inputs together using FormGroup to manage them as a single unit.

🎯 Goal: Create an Angular standalone component that uses FormGroup to group two form controls: firstName and lastName. Display the form with input fields and a submit button.

📋 What You'll Learn

Create a FormGroup named nameForm with two controls: firstName and lastName

Initialize both controls with empty strings

Add a submit button that triggers a submitForm() method

Use Angular reactive forms with standalone component and import necessary modules

💡 Why This Matters

🌍 Real World

Grouping form controls with FormGroup helps organize related inputs, making it easier to manage and validate user data in real-world Angular applications like registration or profile forms.

💼 Career

Understanding FormGroup and reactive forms is essential for Angular developers to build scalable, maintainable forms with clear data structure and validation.

1

Setup the Angular component and import ReactiveFormsModule

Create a standalone Angular component named NameFormComponent. Import ReactiveFormsModule from @angular/forms and add it to the imports array. Add a basic template with a <form> element and a submit button with text Submit.

Angular

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      Submit
    
  `
})
export class NameFormComponent {
  // Your code here
}

Need a hint?

Remember to import ReactiveFormsModule and add it to the imports array in the component decorator.

2

Create a FormGroup named nameForm with two controls

Inside the NameFormComponent class, create a FormGroup called nameForm. It should have two controls: firstName and lastName, both initialized with empty strings. Import FormGroup and FormControl from @angular/forms.

Angular

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

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      Submit
    
  `
})
export class NameFormComponent {
  // Create nameForm FormGroup here
}

Need a hint?

Use new FormGroup with an object containing firstName and lastName as new FormControl('').

3

Bind the FormGroup to the form and add input fields

In the component template, bind the nameForm FormGroup to the <form> element using [formGroup]. Add two input fields inside the form: one with formControlName="firstName" and another with formControlName="lastName". Keep the submit button.

Angular

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

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      
      Submit
    
  `
})
export class NameFormComponent {
  nameForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });
}

Need a hint?

Use [formGroup]="nameForm" on the form and add two inputs with formControlName set to firstName and lastName.

4

Add a submit handler method and bind it to the form submit event

Add a method named submitForm() inside the NameFormComponent class. Bind this method to the form's (ngSubmit) event in the template. The method can be empty for now.

Angular

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

@Component({
  selector: 'app-name-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      
      
      Submit
    
  `
})
export class NameFormComponent {
  nameForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl('')
  });

  // Add submitForm method here
}

Need a hint?

Bind (ngSubmit) on the form to submitForm() and add an empty submitForm() method in the class.