Why forms matter in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the FormsModule needed for template-driven forms in Angular.

Angular

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

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

ACommonModule

BHttpClientModule

CRouterModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClientModule instead of FormsModule

Forgetting to import any module

Importing RouterModule by mistake

The FormsModule is required to use template-driven forms in Angular.

2fill in blank

medium

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

Angular

<input [(ngModel)]="[1]" name="username">

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

Auser

BuserName

Cusername

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name that does not exist in the component

Forgetting to add the name attribute

Using one-way binding instead of two-way binding

The property username is bound to the input using [(ngModel)] for two-way binding.

3fill in blank

hard

Fix the error in the form submission method to prevent default behavior.

Angular

<form (ngSubmit)="[1]($event)">

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

AonSubmit

BhandleSubmit

CsubmitForm

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name not defined in the component

Not passing the event parameter

Not preventing default form submission

The method onSubmit is commonly used to handle form submission and can receive the event to prevent default behavior.

4fill in blank

hard

Fill both blanks to create a reactive form control and bind it in the template.

Angular

this.form = new FormGroup({ name: new [1]('') });

<input [formControl]="this.form.get('[2]')">

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

AFormControl

BFormGroup

Cname

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormGroup instead of FormControl for a single control

Mismatching the control name in the template

Forgetting to initialize the form control

FormControl creates a control for the form field, and the control is accessed by its name name in the template.

5fill in blank

hard

Fill all three blanks to add validation and check if the form control is valid.

Angular

this.form = new FormGroup({
  email: new FormControl('', [[1].required, [2].email])
});

const isValid = this.form.get('email')?.[3];

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

AValidators

BFormsModule

Cvalid

DFormControl

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormsModule instead of Validators for validation

Checking the wrong property for validity

Not importing Validators

Validators provides built-in validation functions like required and email. The valid property checks if the control passes validation.