Two-way binding in forms in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value to the component property using two-way binding.

Angular

<input type="text" [(ngModel)]="[1]">

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

Ausername

BuserName

Cuser_name

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using one-way binding syntax like [ngModel] instead of [(ngModel)]

Misspelling the property name

The [(ngModel)] directive binds the input value to the username property in the component, enabling two-way binding.

2fill in blank

medium

Complete the code to import the module needed for two-way binding in Angular forms.

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

The FormsModule must be imported to use [(ngModel)] for two-way binding in template-driven forms.

3fill in blank

hard

Fix the error in the component template to correctly bind the input value two-way.

Angular

<input type="text" [1]>

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

AuserName

B[(ngModel)]="userName"

C[(ngModel)]="username"

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using only [ngModel] without parentheses

Using curly braces inside the attribute

Two-way binding requires the syntax [(ngModel)]="propertyName". Using only [ngModel] is one-way binding.

4fill in blank

hard

Fill both blanks to complete the component decorator for enabling two-way binding.

Angular

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  imports: [[1]],
  standalone: [2]
})

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

AFormsModule

BHttpClientModule

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false

Importing wrong modules

To use two-way binding in a standalone component, import FormsModule and set standalone to true.

5fill in blank

hard

Fill all three blanks to create a two-way bound input with a label and bind it to the 'email' property.

Angular

<label for="emailInput">Email:</label>
<input id="emailInput" type="email" [1]="email" [2] [3]>

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

Aname

B[(ngModel)]="email"

Crequired

Dplaceholder

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the name attribute

Using [ngModel] instead of [(ngModel)]

Forgetting required attribute

The input needs a name attribute for forms, [(ngModel)]="email" for two-way binding, and required for validation.