FormArray for dynamic fields in Angular - Mini Project: Build & Apply

FormArray for dynamic fields

📖 Scenario: You are building a simple Angular form where users can add multiple email addresses dynamically. This is common in real-life when a user might have several contact emails.

🎯 Goal: Create an Angular standalone component that uses FormArray to manage a list of email input fields. The user can add new email fields by clicking a button.

📋 What You'll Learn

Use Angular standalone component with ReactiveFormsModule

Create a FormArray inside a FormGroup to hold email controls

Add a button to add new email fields dynamically

Display the form with all email input fields bound to the FormArray controls

💡 Why This Matters

🌍 Real World

Dynamic forms are common in real-world apps where users can add multiple entries like emails, phone numbers, or addresses.

💼 Career

Understanding FormArray is essential for Angular developers to build flexible and user-friendly forms.

1

Set up the initial form with a FormArray

Create a standalone Angular component named EmailListComponent. Inside it, create a FormGroup called emailForm with a FormArray named emails initialized as empty.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: ``,
})
export class EmailListComponent {
  emailForm = new FormGroup({
    emails: new FormArray([]),
  });

  // Your code here
}

Hint

Use new FormGroup and inside it create emails as new FormArray([]).

2

Add a method to add new email FormControl

Inside EmailListComponent, add a method called addEmail() that adds a new FormControl with an empty string to the emails FormArray.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: ``,
})
export class EmailListComponent {
  emailForm = new FormGroup({
    emails: new FormArray([]),
  });

  addEmail() {
    // Your code here
  }
}

Hint

Use this.emailForm.get('emails') cast to FormArray and call push(new FormControl('')).

3

Display the email input fields and add button in template

In the component template, use *ngFor to loop over emailForm.controls.emails.controls with index i. For each, create an <input> bound to the FormControl using [formControl]. Below the list, add a button with (click) calling addEmail().

Angular

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      
    
    Add Email
  `,
})
export class EmailListComponent {
  emailForm = new FormGroup({
    emails: new FormArray([]),
  });

  addEmail() {
    (this.emailForm.get('emails') as FormArray).push(new FormControl(''));
  }
}

Hint

Use *ngFor on emailForm.get('emails').controls and bind each input with [formControl]. Add a button with (click)="addEmail()".

4

Initialize the form with one email field on component load

In the EmailListComponent constructor, call the addEmail() method once to start the form with one empty email input field.

Angular

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-email-list',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    
      
        
      
      Add Email
    
  `,
})
export class EmailListComponent {
  emailForm = new FormGroup({
    emails: new FormArray([]),
  });

  constructor() {
    // Your code here
  }

  addEmail() {
    (this.emailForm.get('emails') as FormArray).push(new FormControl(''));
  }
}

Hint

Call this.addEmail() inside the constructor to add the first email field.

Practice

1. What is the main purpose of FormArray in Angular forms?

easy

A. To manage a dynamic list of form controls that can grow or shrink

B. To create a single form control with a fixed value

C. To style form inputs dynamically

D. To handle form submission events

Solution

1. Step 1: Understand what FormArray does

   FormArray is designed to hold multiple form controls dynamically, allowing adding or removing controls as needed.

2. Step 2: Compare options

   Only To manage a dynamic list of form controls that can grow or shrink correctly describes this dynamic list management. Others describe unrelated features.

3. Final Answer:

   To manage a dynamic list of form controls that can grow or shrink -> Option A

4. Quick Check:

   FormArray = dynamic list of controls [OK]

Hint: FormArray is for lists of controls, not single controls [OK]

Common Mistakes:

• Confusing FormArray with FormControl
• Thinking FormArray handles styling
• Assuming FormArray manages form submission

2. Which of the following is the correct way to add a new control to a FormArray named emails?

easy

A. emails.insertControl(new FormControl(''))

B. emails.addControl(new FormControl(''))

C. emails.push(new FormControl(''))

D. emails.appendControl(new FormControl(''))

Solution

1. Step 1: Recall FormArray methods

   The method to add a control to FormArray is push().

2. Step 2: Check each option

   Only emails.push(new FormControl('')) uses push() correctly. Others are invalid methods for FormArray.

3. Final Answer:

   emails.push(new FormControl('')) -> Option C

4. Quick Check:

   Use push() to add control [OK]

Hint: Use push() to add controls to FormArray [OK]

Common Mistakes:

• Using addControl() which is for FormGroup
• Trying appendControl() or insertControl() which don't exist
• Confusing FormArray with FormGroup methods

3. Given this code snippet, what will be the length of the FormArray after execution?

const tags = new FormArray([]);
tags.push(new FormControl('angular'));
tags.push(new FormControl('typescript'));
tags.removeAt(0);

medium

A. 1

B. 2

C. 0

D. 3

Solution

1. Step 1: Track push operations

   Two controls are added, so length becomes 2.

2. Step 2: Apply removeAt(0)

   The first control is removed, reducing length by 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   2 added - 1 removed = 1 [OK]

Hint: Count pushes minus removes for length [OK]

Common Mistakes:

• Forgetting removeAt reduces length
• Assuming removeAt(0) removes last item
• Counting pushes only without removals

4. Identify the error in this code snippet that tries to remove a control from a FormArray named phones:

phones.remove(1);

medium

A. remove() requires a FormControl argument, not an index

B. No error; remove() works fine

C. remove() should be called with a string index

D. remove() is not a method of FormArray; should use removeAt()

Solution

1. Step 1: Check FormArray removal methods

   FormArray uses removeAt(index) to remove controls by position.

2. Step 2: Analyze the code

   Calling remove(1) is invalid because remove is not a FormArray method.

3. Final Answer:

   remove() is not a method of FormArray; should use removeAt() -> Option D

4. Quick Check:

   Use removeAt() to remove by index [OK]

Hint: Use removeAt() to remove by index, not remove() [OK]

Common Mistakes:

• Using remove() instead of removeAt()
• Passing wrong argument types to removal methods
• Assuming remove() exists on FormArray

5. You want to create a form where users can add multiple email addresses dynamically. Which approach correctly initializes the FormArray and adds a new empty email control when a button is clicked?

hard

A. Initialize with new FormGroup([]) and add with emails.push('')

B. Initialize with new FormArray([]) and add with emails.push(new FormControl(''))

C. Initialize with new FormControl([]) and add with emails.addControl(new FormControl(''))

D. Initialize with new FormArray(['']) and add with emails.insertControl(new FormControl(''))

Solution

1. Step 1: Correct initialization of FormArray

   FormArray should be initialized with an empty array: new FormArray([]).

2. Step 2: Adding new controls properly

   Use push(new FormControl('')) to add a new empty control dynamically.

3. Final Answer:

   Initialize with new FormArray([]) and add with emails.push(new FormControl('')) -> Option B

4. Quick Check:

   FormArray + push(new FormControl('')) = dynamic emails [OK]

Hint: Use FormArray([]) and push(new FormControl('')) to add fields [OK]

Common Mistakes:

• Using FormControl instead of FormArray for multiple inputs
• Trying to add controls with addControl() on FormArray
• Initializing FormArray with values instead of controls