Showing validation errors in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the form control to the input field.

Angular

<input type="text" [formControl]="[1]">

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

AcontrolName

BformGroup

CngModel

DnameControl

Attempts:

3 left

💡 Hint

Common Mistakes

Using formGroup instead of formControl

Using ngModel which is for template-driven forms

Using controlName which is for formGroup directives

The [formControl] directive binds the input to the specified FormControl instance.

2fill in blank

medium

Complete the code to check if the form control is invalid and touched.

Angular

<div *ngIf="[1].invalid && [1].touched">Please enter a valid value.</div>

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

AnameControl

BformGroup

CformControlName

DngModel

Attempts:

3 left

💡 Hint

Common Mistakes

Checking invalid on formGroup instead of formControl

Using formControlName string instead of variable

Using ngModel which is unrelated here

We check the invalid and touched properties on the FormControl instance to show errors only after user interaction.

3fill in blank

hard

Fix the error in the code to display the required error message.

Angular

<div *ngIf="[1].errors?.required">This field is required.</div>

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

AnameControl

BformGroup

CformControlName

DngModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using formGroup instead of formControl

Using formControlName string instead of variable

Using ngModel which is unrelated here

The errors property is on the FormControl instance, so use the variable name.

4fill in blank

hard

Fill both blanks to create a form group with a required validator.

Angular

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

<input type="text" [formControlName]="[2]">

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

AValidators.required

Bname

CValidators.minLength(3)

Demail

Attempts:

3 left

💡 Hint

Common Mistakes

Using minLength instead of required validator

Mismatching formControlName string and FormGroup key

Using 'email' instead of 'name' for control name

The first blank needs the required validator function. The second blank is the control name string used in the template.

5fill in blank

hard

Fill all three blanks to show an error message only when the control is invalid, touched, and has a required error.

Angular

<div *ngIf="[1].invalid && [2] && [3].errors?.required">Name is required.</div>

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

AnameControl

BnameControl.touched

DnameControl.dirty

Attempts:

3 left

💡 Hint

Common Mistakes

Using dirty instead of touched

Using formGroup instead of formControl

Not checking errors?.required properly

The first and third blanks are the FormControl variable. The second blank checks if the control was touched.