ReactiveFormsModule setup in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the ReactiveFormsModule in the Angular module.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { [1] } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [BrowserModule, [1]],
  bootstrap: []
})
export class AppModule {}

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

AFormsModule

BHttpClientModule

CReactiveFormsModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of ReactiveFormsModule

Forgetting to add ReactiveFormsModule to the imports array

You need to import ReactiveFormsModule from @angular/forms to use reactive forms in Angular.

2fill in blank

medium

Complete the code to create a FormGroup with a 'name' control using FormBuilder.

Angular

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

@Component({
  selector: 'app-profile',
  template: `<form [formGroup]="profileForm"></form>`
})
export class ProfileComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      name: [1]
    });
  }
}

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

A0

B''

Cnull

D['']

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain string instead of an array

Using null or 0 which are not typical initial values for text controls

The FormBuilder.group method expects each control to be an array with the initial value and optionally validators. Here, [''] initializes the 'name' control with an empty string.

3fill in blank

hard

Fix the error in the template binding to connect the form group correctly.

Angular

<form [[1]]="profileForm">
  <input formControlName="name">
</form>

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

AformGroup

BngModel

CformControl

DformControlName

Attempts:

3 left

💡 Hint

Common Mistakes

Using formControl on the form element instead of formGroup

Using ngModel which is for template-driven forms

The formGroup directive binds the form element to the FormGroup instance in the component.

4fill in blank

hard

Fill both blanks to import and inject FormBuilder in the component.

Angular

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

@Component({
  selector: 'app-login',
  template: `<form [formGroup]="loginForm"></form>`
})
export class LoginComponent {
  loginForm;

  constructor(private [2]: FormBuilder) {
    this.loginForm = this.[2].group({});
  }
}

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

AFormBuilder

BFormGroup

Cfb

DformBuilder

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormGroup instead of FormBuilder in import

Using 'formBuilder' as injected variable name but not matching usage

You import FormBuilder and inject it with a variable name, here fb, to create form groups easily.

5fill in blank

hard

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

Angular

this.loginForm = this.fb.group({
  [1]: [2],
  [3]: ['']
});

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

Aemail

B['']

Cpassword

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using null instead of [''] for initial values

Mixing control names and values incorrectly

Each control is a key with an array containing the initial value. Here, 'email' and 'password' are initialized with empty strings.

Practice

1. What is the main purpose of importing ReactiveFormsModule in an Angular module?

easy

A. To enable building and managing reactive forms with FormGroup and FormControl

B. To add routing capabilities to the Angular application

C. To provide HTTP client services for API calls

D. To enable template-driven forms only

Solution

1. Step 1: Understand the role of ReactiveFormsModule

   ReactiveFormsModule is specifically designed to enable reactive forms in Angular, allowing use of FormGroup and FormControl for form state management.

2. Step 2: Compare with other Angular modules

   Other modules like RouterModule or HttpClientModule serve different purposes such as routing or HTTP requests, not form management.

3. Final Answer:

   To enable building and managing reactive forms with FormGroup and FormControl -> Option A

4. Quick Check:

   ReactiveFormsModule = reactive forms support [OK]

Hint: ReactiveFormsModule is for reactive forms, not routing or HTTP [OK]

Common Mistakes:

• Confusing ReactiveFormsModule with RouterModule
• Thinking ReactiveFormsModule is for template-driven forms
• Assuming it provides HTTP services

2. Which of the following is the correct way to import ReactiveFormsModule in an Angular module?

easy

A. import { ReactiveFormsModule } from '@angular/platform-browser';

B. import { ReactiveFormsModule } from '@angular/forms';

C. import { ReactiveFormsModule } from '@angular/common';

D. import { ReactiveFormsModule } from '@angular/core';

Solution

1. Step 1: Identify the correct Angular package for ReactiveFormsModule

   ReactiveFormsModule is part of the '@angular/forms' package, which contains form-related classes.

2. Step 2: Verify other package names

   @angular/core is for core Angular features, @angular/common for common directives, and @angular/platform-browser for browser support, none contain ReactiveFormsModule.

3. Final Answer:

   import { ReactiveFormsModule } from '@angular/forms'; -> Option B

4. Quick Check:

   ReactiveFormsModule comes from '@angular/forms' [OK]

Hint: ReactiveFormsModule always imports from '@angular/forms' [OK]

Common Mistakes:

• Importing from '@angular/core' instead of '@angular/forms'
• Using '@angular/common' or '@angular/platform-browser' incorrectly
• Misspelling the module name

3. Given this Angular module snippet, what will happen when the app runs?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

medium

A. The app will fail because ReactiveFormsModule is missing from imports

B. The app will only support template-driven forms

C. The app will throw a runtime error due to missing BrowserModule

D. The app can use reactive forms features like FormGroup and FormControl without errors

Solution

1. Step 1: Check module imports

   The module imports BrowserModule and ReactiveFormsModule, which are required for running the app and using reactive forms respectively.

2. Step 2: Confirm bootstrap and declarations

   AppComponent is declared and bootstrapped correctly, so the app starts properly.

3. Final Answer:

   The app can use reactive forms features like FormGroup and FormControl without errors -> Option D

4. Quick Check:

   ReactiveFormsModule imported = reactive forms work [OK]

Hint: If ReactiveFormsModule is in imports, reactive forms work [OK]

Common Mistakes:

• Assuming ReactiveFormsModule is missing when it is imported
• Confusing BrowserModule with ReactiveFormsModule
• Thinking template-driven forms are enabled by ReactiveFormsModule

4. Identify the error in this Angular module setup for reactive forms:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

medium

A. ReactiveFormsModule is imported but not added to the imports array

B. BrowserModule is missing from imports

C. AppComponent is not declared

D. NgModule decorator is missing

Solution

1. Step 1: Check imports array in NgModule

   ReactiveFormsModule is imported at the top but not included in the imports array, so reactive forms features won't work.

2. Step 2: Verify other parts

   BrowserModule is present, AppComponent is declared, and NgModule decorator is used correctly.

3. Final Answer:

   ReactiveFormsModule is imported but not added to the imports array -> Option A

4. Quick Check:

   ReactiveFormsModule must be in imports array [OK]

Hint: Import and add ReactiveFormsModule to imports array [OK]

Common Mistakes:

• Importing ReactiveFormsModule but forgetting to add it to imports array
• Removing BrowserModule accidentally
• Not declaring AppComponent

5. You want to create a form with two controls: username and email. Which setup correctly initializes the form using ReactiveFormsModule in your component?

hard

A. this.form = new FormGroup(['username', 'email']);

B. this.form = new FormControl({ username: '', email: '' });

C. this.form = new FormGroup({ username: new FormControl(''), email: new FormControl('') });

D. this.form = new FormControl('username', 'email');

Solution

1. Step 1: Understand FormGroup and FormControl usage

   FormGroup groups multiple FormControl instances. Each control is created with new FormControl(initialValue).

2. Step 2: Analyze each option

   this.form = new FormGroup({ username: new FormControl(''), email: new FormControl('') }); correctly creates a FormGroup with two FormControls for username and email. Options A, B, and D misuse FormControl or FormGroup constructors.

3. Final Answer:

   this.form = new FormGroup({ username: new FormControl(''), email: new FormControl('') }); -> Option C

4. Quick Check:

   FormGroup needs FormControl objects inside [OK]

Hint: FormGroup holds FormControls as object properties [OK]

Common Mistakes:

• Using FormControl with object instead of FormGroup
• Passing array instead of object to FormGroup
• Passing multiple strings to FormControl