Reactive forms vs template forms decision in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the module needed for reactive forms in Angular.

Angular

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

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

ARouterModule

BHttpClientModule

CReactiveFormsModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of ReactiveFormsModule

Importing unrelated modules like HttpClientModule

The ReactiveFormsModule is required to use reactive forms in Angular.

2fill in blank

medium

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

Angular

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

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

AFormControl

BFormBuilder

CFormArray

DFormGroup

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormGroup instead of FormControl for a single input

Using FormBuilder directly in this place

FormControl creates a single control in a reactive form.

3fill in blank

hard

Fix the error in the template to bind a reactive form control named 'email'.

Angular

<input type="email" [1]="myForm.get('email')">

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

A[(ngModel)]

B[formControl]

CformControlName

DngModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngModel which is for template-driven forms

Using formControlName without a parent FormGroup directive

Use [formControl] to bind a FormControl instance in reactive forms.

4fill in blank

hard

Fill both blanks to create a template-driven form input with two-way binding.

Angular

<input type="text" name="username" [1]="username" [2]>

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

A[(ngModel)]

BformControl

Crequired

DformControlName

Attempts:

3 left

💡 Hint

Common Mistakes

Using formControl or formControlName in template-driven forms

Forgetting to add the required attribute for validation

Template-driven forms use [(ngModel)] for two-way binding and required for validation.

5fill in blank

hard

Fill the blank to define a reactive form with a FormBuilder and add a required validator.

Angular

this.myForm = this.fb.group({ email: ['', [1].required] });

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

AValidators

BFormControl

CFormGroup

DFormBuilder

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormControl or FormGroup instead of Validators for validation

Confusing FormBuilder with Validators

The Validators class provides built-in validators like required for reactive forms.