Angular Working With Form Arrays Complete Guide

Angular Working with Form Arrays: Explained in Details and Important Info

Importance of Form Arrays in Angular

Understanding and implementing form arrays is crucial for building complex, user-friendly forms that can adapt to various inputs. Form arrays provide flexibility and are part of Angular's robust reactive forms module, which is favored for its comprehensive features and scalability.

Reactive Forms vs Template Driven Forms

Before diving into form arrays, it's important to differentiate between two types of form handling in Angular:

1. Reactive Forms: Offer explicit, type-safe methods and data validation logic. Recommended for complex applications.
2. Template-Driven Forms: Use directives to handle form validations with minimal setup code. Suitable for simpler use cases.

Form arrays fall under the umbrella of reactive forms due to their advanced nature and flexibility.

Setting Up Reactive Forms Module

To work with form arrays, you must first set up the ReactiveFormsModule in your Angular application. Import it within your module:

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
    // other modules
  ],
})
export class AppModule {}

Import Important Classes

Import the necessary classes from @angular/forms module to manage form arrays.

// component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

Creating Form Arrays

Form arrays can be created directly via the FormBuilder or FormGroup classes. Here is an example using FormBuilder:

// component.ts
@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dynamicForm = this.fb.group({
      addresses: this.fb.array([])
    });
  }

  get addresses(): FormArray {
    return this.dynamicForm.get('addresses') as FormArray;
  }
}

In the above snippet:

• A new form group named dynamicForm is initialized containing an empty form array called addresses.
• The getter function addresses returns a typed FormArray, facilitating further operations like adding or removing form controls.

Adding and Removing Controls in Form Arrays

You can dynamically add and remove form controls from a form array using the push and removeAt methods respectively.

Adding a Control

To add a control, create a new FormControl or FormGroup and then push it onto the form array:

// component.ts
addAddress() {
  const newAddress = this.fb.group({
    city: ['', Validators.required],
    state: ['', Validators.required]
  });
  this.addresses.push(newAddress);
}

Removing a Control

To remove a control based on its index, simply call the removeAt method:

// component.ts
removeAddress(index: number) {
  this.addresses.removeAt(index);
}

Using Dynamic Inputs in HTML Templates

Bind these methods to buttons in your template:

<!-- dynamic-form.component.html -->
<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div formArrayName="addresses">
    <h3>Addresses</h3>
    <div *ngFor="let address of addresses.controls; let i=index" [formGroupName]="i">
      <input formControlName="city" placeholder="City">
      <input formControlName="state" placeholder="State">
      <button (click)="removeAddress(i)">Remove</button>
    </div>
  </div>
  <button (click)="addAddress()">Add Address</button>
  
  <button type="submit">Submit</button>
</form>

Initializing Form Arrays with Data

Sometimes you need to initialize a form array with pre-existing data:

// component.ts
initialAddresses = [
  { city: 'New York', state: 'NY' },
  { city: 'Los Angeles', state: 'CA' }
];

ngOnInit() {
  this.dynamicForm = this.fb.group({
    addresses: this.fb.array([])
  });

  this.initialAddresses.forEach(address => {
    this.addresses.push(this.fb.group({
      city: address.city,
      state: address.state
    }));
  });
}

This sets the initial values of the form array as specified in initialAddresses.

Nested Form Arrays

Form arrays can also host other form arrays to represent more complex structures. Here’s an example:

// component.ts
addPhone() {
  const newPhone = this.fb.group({
    type: [''],
    number: ['', Validators.required]
  });
  this.getPhones().push(newPhone);
}

addContact() {
  const newContact = this.fb.group({
    name: ['', Validators.required],
    phones: this.fb.array([]) // Nested form array
  });
  this.contacts.push(newContact);
}

get contacts(): FormArray {
  return this.dynamicForm.get('contacts') as FormArray;
}

getPhones(index: number) {
  return (this.contacts.at(index).get('phones') as FormArray);
}

And the corresponding HTML:

<!-- nested-form.component.html -->
<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div formArrayName="contacts">
    <div *ngFor="let contact of contacts.controls; let cIndex=index" [formGroupName]="cIndex">
      <input formControlName="name" placeholder="Contact Name">
      
      <div formArrayName="phones">
        <div *ngFor="let phone of getPhones(cIndex).controls; let pIndex=index" [formGroupName]="pIndex">
          <input formControlName="type" placeholder="Phone Type">
          <input formControlName="number" placeholder="Phone Number">
          
          <button (click)="removePhone(cIndex, pIndex)">Remove Phone</button>
        </div>
        <button (click)="addPhone()">Add Phone</button>
      </div>
    </div>
    <button (click)="addContact()">Add Contact</button>
    
    <button type="submit">Submit</button>
  </div>
</form>

Validating Form Arrays

Validation can be applied both at the individual control and array level:

Individual Control Validation

As seen previously, validators can be added when creating each control.

Form Array Validation

You can define custom validators at the form array level. Here’s an example requiring at least one address:

// validators.ts
import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

export function atLeastOneValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (control instanceof FormArray) {
      const arrayControl = control as FormArray;
      return arrayControl.length > 0 ? null : { atLeastOne: true };
    }
    return null;
  };
}

Apply it to your form array:

// component.ts
ngOnInit() {
  this.dynamicForm = this.fb.group({
    addresses: this.fb.array([], [Validators.required, atLeastOneValidator()])
  });
}

In HTML: