Validators (required, minLength, pattern) in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a required validator to the form control.

Angular

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

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

Arequired

BminLength

Cpattern

DmaxLength

Attempts:

3 left

💡 Hint

Common Mistakes

Using minLength or pattern instead of required.

The required validator ensures the form control is not empty.

2fill in blank

medium

Complete the code to add a minimum length validator of 5 characters.

Angular

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

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

A3

B8

C5

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a number smaller or larger than 5.

The minLength validator requires the input to be at least the given number of characters. Here, 5 means minimum 5 characters.

3fill in blank

hard

Fix the error in the pattern validator to only allow digits.

Angular

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

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

A^[a-zA-Z]+$

B^\\d+$

C^[a-z0-9]+$

D^\\w+$

Attempts:

3 left

💡 Hint

Common Mistakes

Using patterns that allow letters or other characters.

The pattern ^\\d+$ matches only digits from start to end.

4fill in blank

hard

Fill both blanks to create a form control with required and minimum length 8 validators.

Angular

this.form = new FormGroup({ password: new FormControl('', [Validators.[1], Validators.[2](8)]) });

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

Arequired

BminLength

Cpattern

DmaxLength

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order or using wrong validators.

The required validator ensures the field is filled, and minLength(8) ensures at least 8 characters.

5fill in blank

hard

Fill all three blanks to create a form control with required, minLength 6, and a pattern allowing only letters.

Angular

this.form = new FormGroup({ username: new FormControl('', [Validators.[1], Validators.[2](6), Validators.[3]('^[a-zA-Z]+$')]) });

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

Arequired

BminLength

Cpattern

DmaxLength

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong validator names or wrong pattern.

The validators ensure the username is filled, at least 6 characters, and contains only letters.