Creating a Utility Method in Angular to List Form Controls and Log Their Values

Working with reactive forms in Angular is an integral part of creating robust and user-friendly applications. Often, developers need to debug their forms by listing all form controls and their corresponding values. Instead of manually iterating through controls every time, we can create a reusable utility method to make this process efficient and clean.

In this blog post, we will guide you through creating a utility method that dynamically lists all form controls in a FormGroup or FormArray and logs their values as a formatted table in the console.

Prerequisites

To follow along, you should have:

• Basic knowledge of Angular and reactive forms.
• An Angular application set up with a reactive form implemented.

The Utility Method

We will write a utility method that recursively iterates through all form controls in a given FormGroup or FormArray, collects their names and values, and outputs them in a structured table format.

Step 1: Utility Function Implementation

Create a new file, form-utils.ts, and add the following code:

import { AbstractControl, FormGroup, FormArray } from '@angular/forms';

/**
 * Logs all form controls and their values from a given FormGroup or FormArray.
 * @param control The root FormGroup or FormArray to analyze.
 */
export function logFormControls(control: AbstractControl): void {
  const controlsData: { name: string; value: any }[] = [];

  function extractControls(ctrl: AbstractControl, path: string = ''): void {
    if (ctrl instanceof FormGroup) {
      Object.keys(ctrl.controls).forEach((key) => {
        extractControls(ctrl.controls[key], path ? `${path}.${key}` : key);
      });
    } else if (ctrl instanceof FormArray) {
      ctrl.controls.forEach((childCtrl, index) => {
        extractControls(childCtrl, `${path}[${index}]`);
      });
    } else {
      controlsData.push({ name: path, value: ctrl.value });
    }
  }

  extractControls(control);
  console.table(controlsData);
}

 

Step 2: Using the Utility Function

You can now use this utility function in any component to debug your forms.

For example, consider the following reactive form:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { logFormControls } from './form-utils';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <label>
        Name:
        <input formControlName="name" />
      </label>
      <label>
        Email:
        <input formControlName="email" />
      </label>
      <div formGroupName="address">
        <label>
          City:
          <input formControlName="city" />
        </label>
        <label>
          Zip Code:
          <input formControlName="zip" />
        </label>
      </div>
      <button type="button" (click)="logControls()">Log Controls</button>
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      address: this.fb.group({
        city: [''],
        zip: [''],
      }),
    });
  }

  logControls(): void {
    logFormControls(this.myForm);
  }
}

 

Step 3: Testing the Function

Run the application and fill in some values in the form. When you click the “Log Controls” button, the utility function will output a formatted table in the console, listing all form controls and their values:

┌─────────┬───────────────┬───────────────┐
│ (index) │     name      │     value     │
├─────────┼───────────────┼───────────────┤
│    0    │     "name"    │  "John Doe"   │
│    1    │    "email"    │ "john@doe.com"│
│    2    │ "address.city"│   "New York"  │
│    3    │ "address.zip" │    "10001"    │
└─────────┴───────────────┴───────────────┘

Benefits of Using This Utility Method

1. Reusability: You can use the same function across different forms and components.
2. Readability: Outputs the form structure and values in a clear and organized table.
3. Efficiency: Simplifies debugging complex forms with nested structures.

Conclusion

This utility method is a simple yet powerful tool for debugging reactive forms in Angular. By logging all form controls and their values, you can quickly identify issues and ensure your form behaves as expected.

Try incorporating this utility method into your Angular projects and streamline your form debugging process!