FormControl basics in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new FormControl with an initial value of an empty string.

Angular

const nameControl = new FormControl([1]);

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

A''

Bnull

C0

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as initial value instead of an empty string.

Forgetting to pass any value to FormControl.

The FormControl constructor takes the initial value as its first argument. An empty string '' initializes the control with no text.

2fill in blank

medium

Complete the code to import FormControl from Angular's forms package.

Angular

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

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

AValidators

BFormGroup

CFormControl

DFormBuilder

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormGroup instead of FormControl.

Forgetting to import from '@angular/forms'.

FormControl is imported from '@angular/forms' to create individual form controls.

3fill in blank

hard

Fix the error in the code by completing the blank to get the current value of the FormControl named 'emailControl'.

Angular

const emailValue = emailControl.[1];

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

AsetValue()

Bvalue

Creset()

DupdateValueAndValidity()

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods like setValue() instead of accessing the value property.

Trying to call value as a function.

The value property of a FormControl holds its current value. Methods like setValue() are for setting, not getting.

4fill in blank

hard

Fill both blanks to create a FormControl with an initial value 'hello' and a required validator.

Angular

const greetingControl = new FormControl([1], [2]);

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

A'hello'

BValidators.required

Cnull

DValidators.minLength(3)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null as initial value instead of 'hello'.

Using the wrong validator or forgetting to import Validators.

The first argument is the initial value, here the string 'hello'. The second argument is the validator function, here Validators.required to make the field mandatory.

5fill in blank

hard

Fill all three blanks to create a FormControl with initial value '', a required validator, and a minimum length validator of 5.

Angular

const passwordControl = new FormControl([1], [[2], [3]]);

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

A''

BValidators.required

CValidators.minLength(5)

DValidators.email

Attempts:

3 left

💡 Hint

Common Mistakes

Passing validators as separate arguments instead of an array.

Using wrong validator names or missing parentheses.

The initial value is an empty string ''. The validators are passed as an array: Validators.required ensures the field is not empty, and Validators.minLength(5) ensures at least 5 characters.