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.