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.