FormsModule setup in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import FormsModule in the Angular component.

Angular

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

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

AFormsModule

BHttpClientModule

CRouterModule

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated modules like HttpClientModule or RouterModule.

Forgetting to import FormsModule before using form directives.

You need to import FormsModule from @angular/forms to use template-driven forms.

2fill in blank

medium

Complete the code to add FormsModule to the imports array in the NgModule decorator.

Angular

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

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

ABrowserModule

BFormsModule

CHttpClientModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Adding the wrong module to imports.

Forgetting to add FormsModule to imports after importing it.

Adding FormsModule to the imports array enables form features in your Angular app.

3fill in blank

hard

Fix the error in the template by completing the form tag with the correct directive.

Angular

<form #userForm="[1]">
  <input name="username" ngModel>
</form>

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

AformGroup

BngSubmit

CngForm

DngModelGroup

Attempts:

3 left

💡 Hint

Common Mistakes

Using formGroup instead of ngForm in template-driven forms.

Omitting the directive and causing Angular to not track the form.

The ngForm directive is automatically applied to template-driven forms to track form state.

4fill in blank

hard

Fill both blanks to bind the input field to the component property using two-way binding.

Angular

<input name="email" [( [1] )]="[2]">

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

AngModel

Bemail

Cvalue

DformControl

Attempts:

3 left

💡 Hint

Common Mistakes

Using formControl which is for reactive forms.

Binding to value instead of using ngModel.

Two-way binding uses [(ngModel)] to connect the input to the component's email property.

5fill in blank

hard

Fill all three blanks to create a form with a submit button that calls the submit method.

Angular

<form ([1])="[2]()" #userForm="ngForm">
  <input name="password" [( [3] )]="password">
  <button type="submit">Submit</button>
</form>

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

AngSubmit

Bsubmit

CngModel

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using click event on form instead of ngSubmit.

Forgetting to use ngModel for two-way binding.

Calling a method name that doesn't exist.

The form listens for ngSubmit event to call the submit method. The input uses two-way binding with ngModel.