FormArray for dynamic fields in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the FormArray class from Angular forms.

Angular

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

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

AFormBuilder

BFormArray

CValidators

DNgForm

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormBuilder instead of FormArray

Forgetting to import FormArray

Importing from wrong Angular package

The FormArray class is imported from @angular/forms to create dynamic form controls.

2fill in blank

medium

Complete the code to create a FormArray inside a FormGroup named 'skills'.

Angular

this.form = new FormGroup({ skills: new [1]([]) });

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

AFormControl

BFormGroup

CFormBuilder

DFormArray

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormControl instead of FormArray

Using FormGroup instead of FormArray

Passing an object instead of an array

Use FormArray to hold a dynamic list of form controls inside the form group.

3fill in blank

hard

Fix the error in adding a new FormControl to the FormArray named 'skills'.

Angular

this.form.get('skills').[1](new FormControl(''));

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

Apush

BaddControl

Cappend

DpushControl

Attempts:

3 left

💡 Hint

Common Mistakes

Using addControl which is for FormGroup

Using append which does not exist

Using pushControl which is invalid

The FormArray uses the push method to add new controls dynamically.

4fill in blank

hard

Fill both blanks to get the FormArray 'skills' and add a new FormControl with empty string.

Angular

const skillsArray = this.form.get('[1]') as [2];
skillsArray.push(new FormControl(''));

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

Askills

BFormGroup

CFormArray

Dcontrols

Attempts:

3 left

💡 Hint

Common Mistakes

Casting to FormGroup instead of FormArray

Using wrong control name

Not casting at all causing errors

Use get('skills') to access the FormArray and cast it as FormArray to use push.

5fill in blank

hard

Fill all three blanks to create a FormArray with two FormControls initialized with 'Angular' and 'TypeScript'.

Angular

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

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

AFormArray

BReact

CTypeScript

DAngular

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormGroup instead of FormArray

Swapping the strings 'Angular' and 'TypeScript'

Using unrelated strings like 'React'

Create a FormArray with two FormControl instances initialized with 'Angular' and 'TypeScript'.