Form state tracking (dirty, touched, valid) in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the correct Angular form module.

Angular

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

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

AReactiveFormsModule

BHttpClientModule

CRouterModule

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClientModule instead of ReactiveFormsModule

Forgetting to import any form module

The ReactiveFormsModule is needed to work with reactive forms and track form state like dirty, touched, and valid.

2fill in blank

medium

Complete the code to create a new form control with an initial empty value.

Angular

const nameControl = new FormControl([1]);

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

Anull

Bundefined

C''

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined which can cause errors in template binding

Using 0 which is a number, not a string

Using an empty string '' initializes the form control with no text, which is common for text inputs.

3fill in blank

hard

Fix the error in checking if the form control has been touched.

Angular

if (this.form.get('email')?.[1]) { console.log('Email touched'); }

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

Atouched

Bpristine

Cdirty

Dvalid

Attempts:

3 left

💡 Hint

Common Mistakes

Using dirty instead of touched

Checking valid which is about validation, not interaction

The touched property tells if the user has focused and then left the input, which is what we want to check here.

4fill in blank

hard

Fill both blanks to create a form group with a required validator and check if it is valid.

Angular

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

const isValid = this.form.get('username')?.[2];

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

AValidators.required

BValidators.minLength(3)

Cvalid

Ddirty

Attempts:

3 left

💡 Hint

Common Mistakes

Using minLength validator instead of required

Checking dirty instead of valid

Use Validators.required to make the username mandatory, and check the valid property to see if the input passes validation.

5fill in blank

hard

Fill all three blanks to mark the form control as touched, check if it is dirty, and reset the form.

Angular

const control = this.form.get('password');
control?.[1]();
const isDirty = control?.[2];
this.form.[3]();

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

AmarkAsTouched

Bdirty

Creset

DmarkAsDirty

Attempts:

3 left

💡 Hint

Common Mistakes

Using markAsDirty instead of markAsTouched

Checking touched instead of dirty

Calling markAsTouched on the form instead of reset

Use markAsTouched() to mark the control as touched, check the dirty property to see if it was changed, and call reset() on the form to clear all controls.