ngModel for form binding in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using ngModel for two-way binding?

Consider this Angular component template snippet:

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

If the user types 'Alice' in the input box, what will be displayed inside the paragraph?

Angular

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

A Hello, Alice!

B Hello, {{ username }}!

C Hello, !

D Hello, undefined!

💡 Hint

ngModel updates the component property as you type.

The [(ngModel)] syntax binds the input value to the 'username' property in both directions. When the user types 'Alice', 'username' updates immediately, so the paragraph shows 'Hello, Alice!'.

📝 Syntax

intermediate

Which option correctly uses ngModel for form binding?

Which of the following Angular template snippets correctly binds the 'email' property using ngModel?

A <input ngModel="email">

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

C <input (ngModel)="email">

D <input [ngModel]="email">

💡 Hint

Two-way binding uses [( )] syntax.

Option B uses the correct two-way binding syntax [(ngModel)]="email". Option B is one-way property binding, C is invalid event binding, and A is invalid attribute usage.

🔧 Debug

advanced

Why does this ngModel binding cause an error?

Given this Angular template:

<input [(ngModel)]="user.name" />

and the component class:

export class MyComponent {
  user = null;
}

What error will occur when the template tries to bind?

Angular

<input [(ngModel)]="user.name" />

export class MyComponent {
  user = null;
}

A Cannot read property 'name' of null

B ngModel is not a known property

C No error, works fine

D Template parse error: Unexpected token

💡 Hint

The user object is null when Angular tries to read 'name'.

Since 'user' is null, accessing 'user.name' causes a runtime error: Cannot read property 'name' of null. The template tries to bind to a property of a null object.

❓ state_output

advanced

What is the value of 'age' after user input with ngModel?

In this Angular component:

age = 30;

and template:

<input type="number" [(ngModel)]="age" />
<p>Age: {{ age }}</p>

If the user deletes the input content making it empty, what will be the value of 'age' in the component?

Angular

age = 30;

<input type="number" [(ngModel)]="age" />
<p>Age: {{ age }}</p>

A age becomes 0

B age becomes an empty string ''

C age remains 30

D age becomes null

💡 Hint

For number inputs, empty input sets the bound property to null.

When the input type='number' is cleared, ngModel's NumberValueAccessor sets 'age' to null. It does not set an empty string, remain 30, or become 0.

🧠 Conceptual

expert

Why must FormsModule be imported to use ngModel?

In Angular, if you use [(ngModel)] in a component template without importing FormsModule in your module, what will happen?

A The input element ignores ngModel and works as a normal input

B ngModel works but with warnings in the console

C Angular throws a template parse error: 'Can't bind to ngModel since it isn't a known property'

D The app compiles but crashes at runtime

💡 Hint

ngModel directive is declared in FormsModule.

ngModel is a directive provided by FormsModule. Without importing FormsModule, Angular does not recognize ngModel and throws a template parse error.

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 {{}}