FormGroup for grouping controls in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a FormGroup named 'profileForm'.

Angular

profileForm = new FormGroup([1]);

Drag options to blanks, or click blank then click option'

A['firstName', 'lastName']

BFormControl

Cnew FormControl('')

D{firstName: new FormControl(''), lastName: new FormControl('')}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an array instead of an object.

Passing a single FormControl instead of an object of controls.

The FormGroup constructor expects an object with keys as control names and values as FormControl instances.

2fill in blank

medium

Complete the code to import the necessary Angular forms class for using FormGroup.

Angular

import { [1] } from '@angular/forms';

Drag options to blanks, or click blank then click option'

AFormsModule

BReactiveFormsModule

CFormGroup

DNgForm

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of FormGroup.

Importing ReactiveFormsModule which is a module, not the class.

You need to import FormGroup from @angular/forms to create form groups.

3fill in blank

hard

Fix the error in the code to correctly access the 'firstName' control value from the FormGroup.

Angular

const firstNameValue = this.profileForm.get([1]).value;

Drag options to blanks, or click blank then click option'

A'firstName'

BfirstName

C['firstName']

Dthis.firstName

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the control name without quotes causes runtime errors.

Using array syntax or this keyword incorrectly.

The get method expects the control name as a string, so it must be quoted.

4fill in blank

hard

Fill both blanks to create a FormGroup with controls 'email' and 'password' initialized with empty strings.

Angular

loginForm = new FormGroup({ [1]: new FormControl(''), [2]: new FormControl('') });

Drag options to blanks, or click blank then click option'

Aemail

Bpassword

Cusername

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect control names like 'username' or 'user'.

Not using string keys for controls.

The keys in the object passed to FormGroup are the control names. Here, they are 'email' and 'password'.

5fill in blank

hard

Fill all three blanks to create a FormGroup named 'addressForm' with controls 'street', 'city', and 'zipCode' initialized with empty strings.

Angular

addressForm = new FormGroup({ [1]: new FormControl(''), [2]: new FormControl(''), [3]: new FormControl('') });

Drag options to blanks, or click blank then click option'

Astreet

Bcity

CzipCode

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong control names.

Forgetting to separate keys with commas.

The object keys are the control names: 'street', 'city', and 'zipCode'.