Why reactive forms are preferred in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive form control in Angular.

Angular

const nameControl = new FormControl([1]);

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

A0

Bnull

C''

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Null or undefined are valid initial values but an empty string is preferred for text inputs.

Using 0 is not suitable for text inputs.

Reactive forms use FormControl to create form controls with initial values. An empty string '' is a common initial value for text inputs.

2fill in blank

medium

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

Angular

const emailControl = new FormControl('', [1]);

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

AValidators.pattern('[a-z]+')

BValidators.required

CValidators.maxLength(10)

DValidators.minLength(5)

Attempts:

3 left

💡 Hint

Common Mistakes

Using minLength or maxLength does not enforce a value is present.

Pattern validator checks format but not presence.

The Validators.required ensures the form control must have a value before the form is valid.

3fill in blank

hard

Fix the error in the reactive form group declaration.

Angular

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

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

AValidators.email

BValidators.max(10)

CValidators.min(5)

DValidators.required

Attempts:

3 left

💡 Hint

Common Mistakes

Using Validators.email for username is incorrect.

Min and max validators are for numbers, not strings.

Adding Validators.required ensures the username field cannot be empty, which is a common requirement.

4fill in blank

hard

Fill both blanks to create a reactive form group with two controls and validators.

Angular

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

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

AValidators.required

BValidators.minLength(6)

CValidators.email

DValidators.maxLength(10)

Attempts:

3 left

💡 Hint

Common Mistakes

Using required only without format or length checks.

Mixing up minLength and maxLength.

The email control needs Validators.email to check format, and the password control needs Validators.minLength(6) to ensure a minimum length.

5fill in blank

hard

Fill all three blanks to create a reactive form with controls, validators, and a submit handler.

Angular

this.profileForm = new FormGroup({
  firstName: new FormControl('', [1]),
  age: new FormControl('', [2]),
  email: new FormControl('', [3])
});

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

AValidators.required

BValidators.min(18)

CValidators.email

DValidators.maxLength(20)

Attempts:

3 left

💡 Hint

Common Mistakes

Not using required validator for first name.

Using maxLength instead of min for age.

Missing email format validation.

First name is required, age must be at least 18, and email must be valid format.