ngModel for form binding in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value using ngModel.

Angular

<input type="text" [1]="username">

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

AngModel

B[ngModel]

C(ngModel)

D[(ngModel)]

Attempts:

3 left

💡 Hint

Common Mistakes

Using only [ngModel] binds one-way from variable to input.

Using (ngModel) binds only events, not value.

Using ngModel without brackets or parentheses is invalid.

The [(ngModel)] syntax binds the input value two-way, so changes update the variable and vice versa.

2fill in blank

medium

Complete the code to import the module needed for ngModel binding.

Angular

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

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

AReactiveFormsModule

BFormsModule

CHttpClientModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ReactiveFormsModule instead of FormsModule.

Forgetting to import any forms module causes errors.

Importing unrelated modules like HttpClientModule.

The FormsModule must be imported to use ngModel for template-driven forms.

3fill in blank

hard

Fix the error in the code by completing the missing attribute for ngModel binding.

Angular

<input type="checkbox" name="subscribe" [1]="isSubscribed">

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

A[(ngModel)]

B[ngModel]

CngModel

D(ngModelChange)

Attempts:

3 left

💡 Hint

Common Mistakes

Using only ngModel attribute without brackets causes no binding.

Using [ngModel] binds only one way and does not update variable on change.

Using (ngModelChange) alone does not bind the value.

Checkbox inputs require two-way binding with [(ngModel)] to update the variable when toggled.

4fill in blank

hard

Fill both blanks to bind the input and handle the change event.

Angular

<input type="text" [1]="email" ([2])="onEmailChange($event)">

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

A[(ngModel)]

BngModelChange

Cchange

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using (change) event instead of (ngModelChange) misses model updates.

Using [ngModel] without parentheses disables two-way binding.

Mixing up event names causes no handler call.

The [(ngModel)] binds the input value two-way, and (ngModelChange) listens for changes to trigger the handler.

5fill in blank

hard

Fill all three blanks to create a form input with label, two-way binding, and accessibility.

Angular

<label for="usernameInput">Username</label>
<input id="usernameInput" type="text" [1]="username" name=[2] aria-label=[3]>

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

A[(ngModel)]

B"username"

C"Enter your username"

DngModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngModel without brackets and parentheses disables binding.

Omitting the name attribute causes form submission issues.

Missing aria-label reduces accessibility for screen reader users.

The input uses [(ngModel)] for two-way binding, the name attribute matches the variable, and aria-label improves accessibility by describing the input.