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.

Practice

1. What does ngModel do in Angular forms?

easy

A. It only updates the component property from the input value.

B. It only updates the input value from the component property.

C. It creates two-way binding between the input and component property.

D. It validates the form input automatically.

Solution

1. Step 1: Understand ngModel purpose

   ngModel binds the input field and component property so changes in one reflect in the other.

2. Step 2: Identify two-way binding behavior

   This means typing in the input updates the property, and changing the property updates the input.

3. Final Answer:

   It creates two-way binding between the input and component property. -> Option C

4. Quick Check:

   ngModel = two-way binding [OK]

Hint: Remember: ngModel syncs input and property both ways [OK]

Common Mistakes:

• Thinking ngModel only updates input or only updates property
• Confusing ngModel with form validation
• Assuming ngModel works without importing FormsModule

2. Which is the correct syntax to bind an input's value to a component property username using ngModel?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Angular two-way binding syntax

   Two-way binding uses the banana-in-a-box syntax: [( )] around ngModel.

2. Step 2: Match syntax to options

   Only uses [(ngModel)]="username", which binds input and property both ways.

3. Final Answer:

   <input [(ngModel)]="username"> -> Option A

4. Quick Check:

   Two-way binding = [(ngModel)] [OK]

Hint: Use [(ngModel)] for two-way binding syntax [OK]

Common Mistakes:

• Using [ngModel] which is one-way binding
• Writing ngModel without brackets or parentheses
• Using incorrect attribute like bind-ngModel

3. Given this component code:

export class MyComponent {
  name = 'Alice';
}

And this template:

<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>

What will be displayed after the user types "Bob" in the input?

medium

A. Hello, !

B. Hello, Alice!

C. Hello, {{name}}!

D. Hello, Bob!

Solution

1. Step 1: Understand two-way binding effect

   Typing "Bob" updates the component property name because of [(ngModel)].

2. Step 2: Check template interpolation

   The paragraph uses {{name}}, so it shows the updated value "Bob".

3. Final Answer:

   Hello, Bob! -> Option D

4. Quick Check:

   Typing updates property and view = Hello, Bob! [OK]

Hint: Typing changes property, interpolation updates view [OK]

Common Mistakes:

• Thinking interpolation won't update after typing
• Confusing initial value with updated value
• Ignoring two-way binding effect

4. What is wrong with this code snippet?

<input [(ngModel)]="email">

Component:

export class UserComponent {
  email: string;
}

medium

A. ngModel cannot be used on input elements.

B. Missing import of FormsModule in the Angular module.

C. The property email must be initialized with a value.

D. The syntax [(ngModel)] is invalid.

Solution

1. Step 1: Check Angular module setup

   Using ngModel requires importing FormsModule in the module where this component is declared.

2. Step 2: Verify other code parts

   The property can be uninitialized (undefined) initially, and syntax is correct. ngModel works on input elements.

3. Final Answer:

   Missing import of FormsModule in the Angular module. -> Option B

4. Quick Check:

   FormsModule import required for ngModel [OK]

Hint: Always import FormsModule to use ngModel [OK]

Common Mistakes:

• Forgetting to import FormsModule
• Thinking property must have initial value
• Believing ngModel syntax is wrong

5. You want to create a form with two inputs bound to firstName and lastName properties. You also want to show the full name live as the user types. Which template code correctly uses ngModel for this?

hard

A. <input [(ngModel)]="firstName">
<input [(ngModel)]="lastName">
<p>Full name: {{firstName}} {{lastName}}</p>

B. <input [ngModel]="firstName">
<input [ngModel]="lastName">
<p>Full name: {{firstName}} {{lastName}}</p>

C. <input ngModel="firstName">
<input ngModel="lastName">
<p>Full name: {{firstName}} {{lastName}}</p>

D. <input [(ngModel)]="firstName">
<input [(ngModel)]="lastName">
<p>Full name: firstName lastName</p>

Solution

1. Step 1: Use two-way binding for inputs

   To update properties as user types, use [(ngModel)] on both inputs.

2. Step 2: Display live full name with interpolation

   Use {{firstName}} and {{lastName}} inside the paragraph to show updated values.

3. Final Answer:

   <input [(ngModel)]="firstName"> <input [(ngModel)]="lastName"> <p>Full name: {{firstName}} {{lastName}}</p> -> Option A

4. Quick Check:

   Two-way binding + interpolation = <input [(ngModel)]="firstName"> <input [(ngModel)]="lastName"> <p>Full name: {{firstName}} {{lastName}}</p> [OK]

Hint: Use [(ngModel)] and {{}} interpolation for live updates [OK]

Common Mistakes:

• Using one-way binding [ngModel] instead of two-way
• Not using interpolation for displaying values
• Writing property names as plain text instead of {{}}