FormGroup for grouping controls in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a FormGroup in Angular?

A FormGroup is a way to group multiple form controls together in Angular. It helps manage the values and validation of a set of related controls as one unit.

beginner

How do you create a FormGroup in Angular?

You create a FormGroup by importing it from '@angular/forms' and then initializing it with a set of controls like this:
new FormGroup({ name: new FormControl(''), age: new FormControl('') })

intermediate

What is the benefit of using FormGroup over individual FormControls?

FormGroup lets you manage multiple controls together. You can check the validity, get or set values for all controls at once, and organize your form logically like grouping fields for a user profile.

beginner

How do you access the value of a FormGroup?

You access the value of a FormGroup using its value property. It returns an object with keys matching the control names and their current values.

intermediate

Can FormGroups be nested inside other FormGroups?

Yes! You can nest FormGroups inside other FormGroups to create complex forms with multiple levels of grouping. This helps organize large forms clearly.

What does a FormGroup in Angular do?

A Styles the form

B Creates a single input field

C Handles HTTP requests

D Groups multiple form controls together

A FormGroup groups multiple form controls so you can manage them as one unit.

How do you get the current values of all controls in a FormGroup?

A Using the value property of the FormGroup

B Using the getValue() method

C Using the formControlName directive

D Using the setValue() method

The value property of a FormGroup returns an object with all control values.

Which import is needed to use FormGroup in Angular?

A import { FormGroup } from '@angular/core';

B import { FormGroup } from '@angular/common';

C import { FormGroup } from '@angular/forms';

D import { FormGroup } from '@angular/router';

FormGroup is part of '@angular/forms' package.

Can FormGroups contain other FormGroups?

A Yes, nesting is allowed

B No, only FormControls can be inside

C Only FormArrays can be nested

D Only in template-driven forms

FormGroups can be nested to create complex form structures.

What is the main advantage of using FormGroup?

A Create animations

B Manage multiple controls as one unit

C Send form data to server

D Automatically style the form

FormGroup helps manage multiple controls together for easier validation and value handling.

Explain how FormGroup helps organize form controls in Angular.

Think about how grouping related things makes managing them easier.

Describe the steps to create and use a FormGroup in an Angular component.

Start from imports, then setup, then usage.

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