FormArray for dynamic fields in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when adding a new control to a FormArray?

Given this Angular component snippet, what will be the length of the emails FormArray after calling addEmail() once?

this.emails = this.fb.array([]);

addEmail() {
  this.emails.push(this.fb.control(''));
}

Angular

import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  template: ''
})
export class EmailListComponent {
  emails: FormArray;

  constructor(private fb: FormBuilder) {
    this.emails = this.fb.array([]);
  }

  addEmail() {
    this.emails.push(this.fb.control(''));
  }
}

A Throws an error

B undefined

C 0

D 1

💡 Hint

Think about what happens when you push a new control into an empty FormArray.

Initially, the FormArray is empty with length 0. Calling addEmail() pushes one new FormControl, increasing the length to 1.

❓ state_output

intermediate

What is the value of the FormArray after removing a control?

Consider this FormArray initialized with three controls holding values 'a', 'b', and 'c'. After calling removeEmail(1), what is the value of emails.value?

this.emails = this.fb.array([
  this.fb.control('a'),
  this.fb.control('b'),
  this.fb.control('c')
]);

removeEmail(index: number) {
  this.emails.removeAt(index);
}

Angular

import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  template: ''
})
export class EmailListComponent {
  emails: FormArray;

  constructor(private fb: FormBuilder) {
    this.emails = this.fb.array([
      this.fb.control('a'),
      this.fb.control('b'),
      this.fb.control('c')
    ]);
  }

  removeEmail(index: number) {
    this.emails.removeAt(index);
  }
}

A ['a', 'c']

B ['a', 'b', 'c']

C ['b', 'c']

D Throws an error

💡 Hint

Removing the control at index 1 removes the second element.

Removing the control at index 1 removes the control holding 'b'. The remaining values are 'a' and 'c'.

📝 Syntax

advanced

Which option correctly initializes a FormArray with dynamic controls?

Which of the following code snippets correctly creates a FormArray of FormControls from an array of strings ['x', 'y', 'z'] using FormBuilder?

A this.fb.array(['x', 'y', 'z'].map(value => new FormControl(value)))

B this.fb.array(['x', 'y', 'z'].map(value => this.fb.control))

C this.fb.array(['x', 'y', 'z'].map(value => this.fb.control(value)))

D this.fb.array(['x', 'y', 'z'].map(value => new FormControl()))

💡 Hint

Remember to call this.fb.control as a function with the value.

Option C correctly maps each string to a FormControl initialized with that string. Option C uses new FormControl(value) which is valid but requires importing FormControl. Option C passes the function reference without calling it. Option C misses passing the value to the constructor.

🔧 Debug

advanced

Why does this FormArray push cause a runtime error?

Given this code, why does calling addEmail() cause a runtime error?

emails = this.fb.array();

addEmail() {
  this.emails.push('[e-mail]');
}

Angular

import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  template: ''
})
export class EmailListComponent {
  emails: FormArray;

  constructor(private fb: FormBuilder) {
    this.emails = this.fb.array([]);
  }

  addEmail() {
    this.emails.push('[e-mail]');
  }
}

A Because push expects a FormControl, not a string

B Because emails is not initialized

C Because push is not a method of FormArray

D Because FormArray cannot be empty

💡 Hint

Check the type of argument that push expects.

The push method of FormArray expects a FormControl or AbstractControl instance. Passing a string directly causes a runtime error.

🧠 Conceptual

expert

How does Angular track FormArray controls for efficient rendering?

When rendering a FormArray in Angular templates with *ngFor, which strategy helps Angular efficiently update the DOM when controls are added or removed?

A Manually recreating the entire FormArray on each change

B Using a <code>trackBy</code> function that returns the control's unique id or index

C Using <code>ChangeDetectionStrategy.OnPush</code> disables updates for FormArray

D Angular automatically tracks controls by their value without extra code

💡 Hint

Think about how Angular identifies list items uniquely in *ngFor.

Using a trackBy function helps Angular identify which controls changed, added, or removed, improving rendering performance. Angular does not track by value automatically, and OnPush affects change detection but not tracking. Recreating the entire FormArray is inefficient.