FormBuilder service in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a form group using FormBuilder.

Angular

this.form = this.formBuilder.[1]({
  name: [''],
  age: ['']
});

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

Aform

Bgroup

Ccontrol

Darray

Attempts:

3 left

💡 Hint

Common Mistakes

Using control() instead of group() to create multiple controls.

Trying to call form() which is not a FormBuilder method.

The group method of FormBuilder creates a new form group.

2fill in blank

medium

Complete the code to inject FormBuilder into the component constructor.

Angular

constructor(private [1]: FormBuilder) {}

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

Abuilder

Bform

CformBuilder

Dfb

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not match the injected service.

Forgetting to mark the parameter as private.

By convention, the FormBuilder service is injected with the name formBuilder.

3fill in blank

hard

Fix the error in the code to add a required validator to the 'email' control.

Angular

this.form = this.formBuilder.group({
  email: ['', [1]]
});

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

AValidators.required{}

BValidators.required()

CValidators.required[]

DValidators.required

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after Validators.required causing a runtime error.

Using invalid syntax like brackets or braces.

The Validators.required is a property, not a function call, so no parentheses are needed.

4fill in blank

hard

Fill both blanks to create a form group with a 'username' control that is required and has a minimum length of 5.

Angular

this.form = this.formBuilder.group({
  username: ['', [[1], [2]]]
});

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

AValidators.required

BValidators.minLength(5)

CValidators.maxLength(5)

DValidators.email

Attempts:

3 left

💡 Hint

Common Mistakes

Using maxLength instead of minLength.

Not wrapping validators in an array.

Use Validators.required and Validators.minLength(5) together to enforce both rules.

5fill in blank

hard

Fill all three blanks to create a form group with 'password' and 'confirmPassword' controls, both required, and add a custom validator named 'passwordMatch'.

Angular

this.form = this.formBuilder.group({
  password: ['', [1]],
  confirmPassword: ['', [2]]
}, { validators: [3] });

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

A[Validators.required]

BValidators.required

CpasswordMatch

DValidators.minLength(8)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing Validators.required without array brackets for controls.

Using 'validator' instead of 'validators' in group options.

Calling the custom validator as a function instead of passing the reference.

Both controls need validators in arrays. The group-level validator is the custom passwordMatch function.