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
}

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
}

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('')
  });
}

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
}

Hint

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

Practice

1. What is the main purpose of using FormGroup in Angular forms?

easy

A. To group related form controls for easier management

B. To style form controls with CSS

C. To fetch data from a server

D. To create animations in forms

Solution

1. Step 1: Understand what FormGroup does

   FormGroup groups multiple form controls together so they can be managed as one unit.

2. Step 2: Compare options with FormGroup purpose

   Only To group related form controls for easier management describes grouping controls for easier management, which is the core use of FormGroup.

3. Final Answer:

   To group related form controls for easier management -> Option A

4. Quick Check:

   FormGroup groups controls = A [OK]

Hint: FormGroup groups controls logically for easier handling [OK]

Common Mistakes:

• Confusing FormGroup with styling or data fetching
• Thinking FormGroup creates animations
• Assuming FormGroup is for server communication

2. Which of the following is the correct way to create a FormGroup with two controls named 'firstName' and 'lastName' in Angular?

easy

A. new FormControl({ firstName: '', lastName: '' })

B. new FormGroup({ firstName: new FormControl(''), lastName: new FormControl('') })

C. new FormGroup(['firstName', 'lastName'])

D. new FormArray([new FormControl('firstName'), new FormControl('lastName')])

Solution

1. Step 1: Recall FormGroup syntax

   FormGroup takes an object with keys as control names and values as FormControl instances.

2. Step 2: Check each option

   new FormGroup({ firstName: new FormControl(''), lastName: new FormControl('') }) correctly creates a FormGroup with two FormControls. Options B, C, and D use wrong classes or structures.

3. Final Answer:

   new FormGroup({ firstName: new FormControl(''), lastName: new FormControl('') }) -> Option B

4. Quick Check:

   FormGroup needs object of FormControls = A [OK]

Hint: FormGroup uses object with FormControl instances [OK]

Common Mistakes:

• Using FormControl instead of FormGroup for multiple controls
• Passing array instead of object to FormGroup
• Confusing FormArray with FormGroup

3. Given this Angular code snippet, what will console.log(this.profileForm.value) output?

this.profileForm = new FormGroup({
  firstName: new FormControl('Alice'),
  lastName: new FormControl('Smith')
});
console.log(this.profileForm.value);

medium

A. undefined

B. ['Alice', 'Smith']

C. { value: { firstName: 'Alice', lastName: 'Smith' } }

D. { firstName: 'Alice', lastName: 'Smith' }

Solution

1. Step 1: Understand FormGroup value property

   The value property returns an object with keys as control names and values as their current values.

2. Step 2: Check the given controls and values

   Controls are firstName and lastName with values 'Alice' and 'Smith'. So value is { firstName: 'Alice', lastName: 'Smith' }.

3. Final Answer:

   { firstName: 'Alice', lastName: 'Smith' } -> Option D

4. Quick Check:

   FormGroup.value returns object of control values = D [OK]

Hint: FormGroup.value returns object with control names and values [OK]

Common Mistakes:

• Expecting an array instead of object
• Thinking value wraps inside another object
• Assuming value is undefined before form submission

4. Identify the error in this Angular code that tries to create a FormGroup:

this.userForm = new FormGroup({
  username: FormControl('user1'),
  email: new FormControl('[e-mail]')
});

medium

A. 'FormControl' must be called with 'new' keyword for 'username' control

B. 'FormGroup' should be 'FormArray' instead

C. 'email' control should not have initial value

D. No error, code is correct

Solution

1. Step 1: Check how FormControl is instantiated

   FormControl must be created with 'new' keyword. 'username' control misses 'new'.

2. Step 2: Verify other controls and FormGroup usage

   'email' control is correct. FormGroup is correct for grouping controls.

3. Final Answer:

   'FormControl' must be called with 'new' keyword for 'username' control -> Option A

4. Quick Check:

   FormControl needs 'new' keyword = B [OK]

Hint: Always use 'new' with FormControl instances [OK]

Common Mistakes:

• Omitting 'new' keyword when creating FormControl
• Confusing FormGroup with FormArray
• Thinking initial values are mandatory or forbidden

5. You want to disable all controls inside a FormGroup named settingsForm at once. Which is the correct way to do this in Angular?

hard

A. Set each control's value to null to disable them

B. Call settingsForm.controls.disable() to disable controls

C. Call settingsForm.disable() to disable all controls together

D. Use settingsForm.setValue(null) to disable controls

Solution

1. Step 1: Understand FormGroup disable method

   FormGroup has a disable() method that disables all child controls at once.

2. Step 2: Check other options for disabling controls

   Call settingsForm.controls.disable() to disable controls is invalid because controls is an object, not a method. Options A and D do not disable controls but change values.

3. Final Answer:

   Call settingsForm.disable() to disable all controls together -> Option C

4. Quick Check:

   FormGroup.disable() disables all controls = C [OK]

Hint: Use FormGroup.disable() to disable all controls at once [OK]

Common Mistakes:

• Trying to disable controls by setting values to null
• Calling disable on controls object directly
• Using setValue to disable controls