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
}

Need a 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
  }
}

Need a 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(''));
  }
}

Need a 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(''));
  }
}

Need a hint?

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