`Generate error messages for reactive form controls in Angular 2/4 without manual input`

Question

`Generate error messages for reactive form controls in Angular 2/4 without manual input`

My validation process involves both frontend and backend components. While the frontend validation is functioning properly, I am encountering difficulties with integrating backend validation results into the frontend (manually marking controls as invalid based on backend validation).

The issue lies in populating form controls with errors - it seems that simply using

this.formBuiltWithFormBuilder.setErrors()

and passing an object with errors does not automatically populate all controls within the form. The entire form only becomes invalid when all field statuses remain unchanged.

Currently, my approach involves:

// Example of incoming formErrors:
// (it can also be nested for nested forms)
// {
//    phone: {
//      phoneNumberNoMatch: "The input does not match..."
//    }
// }

@Input() public formErrors: ValidationErrors;
public detailsForm: FormGroup;

public ngOnInit() {
  this.createForm();
}

public ngOnChanges() {
  this.updateFormErrors(this.formErrors);
}

private createForm(account: AccountInterface) {
  this.detailsForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required]
  });
}

private updateFormErrors(errors: any) {
  if (this.detailsForm) {
    // Trying to populate included form controls with errors
    this.detailsForm.setErrors(errors);
  }
}

I have considered manually iterating through the errors object and applying errors for each control individually, but I believe this solution may not be ideal especially for nested forms.

Is there a way to automatically populate form controls with errors?

angular typescript

Answer 1

Answer №1

It appears that there is no ready-made solution available, so I took the initiative to create a form helper class for error population. The class is designed to handle plain forms, and it should also work with nested or array forms in theory, although I have only tested it with plain forms so far. Feel free to let me know if you encounter any issues ;)

The method utilized in this class involves using the lodash/map function to navigate through the errors object.

import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { map } from 'lodash';

export class FormHelper {
  public static POPULATE_FORM_GROUP_ERRORS(
    rootFormGroup: FormGroup,
    errors: any
  ) {
    map(rootFormGroup.controls, (control, name) => {
      if (control instanceof FormControl) {
        if (errors.hasOwnProperty(name)) {
          control.setErrors(errors[name]);
        }
      }
      if (control instanceof FormGroup) {
        if (errors.hasOwnProperty(name)) {
          FormHelper.POPULATE_FORM_GROUP_ERRORS(control, errors[name]);
        }
      }
      if (control instanceof FormArray) {
        if (errors.hasOwnProperty(name) && errors[name] instanceof Array) {
          this.iterateOverFormArrayControl(control, errors[name]);
        }
      }
    });
  }

  private static iterateOverFormArrayControl(
    formArray: FormArray, 
    errors: any[]
  ) {
    errors.forEach((error: any, index: number) => {
      const arrayControl = formArray.at(index);
      if (arrayControl && arrayControl instanceof FormControl) {
        arrayControl.setErrors(error);
      }
      if (arrayControl && arrayControl instanceof FormGroup) {
        FormHelper.POPULATE_FORM_GROUP_ERRORS(arrayControl, error);
      }
      if (arrayControl && arrayControl instanceof FormArray && error instanceof Array) {
        FormHelper.iterateOverFormArrayControl(arrayControl, error);
      }
    });
  }
}

With the use of this form helper, my form now looks like:

// ... Somewhere at the top
import { FormHelper } from '@app/commons/FormHelper';
// ...

// Example of incoming formErrors:
// (it can also be nested for nested forms)
// {
//    phone: {
//      phoneNumberNoMatch: "The input does not match..."
//    }
// }

@Input() public formErrors: ValidationErrors;
public detailsForm: FormGroup;

public ngOnInit() {
  this.createForm();
}

public ngOnChanges() {
  this.updateFormErrors(this.formErrors);
}

private createForm(account: AccountInterface) {
  this.detailsForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required]
  });
}

private updateFormErrors(errors: any) {
  if (this.detailsForm) {
    // Populate included form controls with errors
   FormHelper.POPULATE_FORM_GROUP_ERRORS(this.detailsForm, errors);
  }
}

Answer 2

It appears that there is no ready-made solution available, so I took the initiative to create a form helper class for error population. The class is designed to handle plain forms, and it should also work with nested or array forms in theory, although I have only tested it with plain forms so far. Feel free to let me know if you encounter any issues ;)

The method utilized in this class involves using the lodash/map function to navigate through the errors object.

import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { map } from 'lodash';

export class FormHelper {
  public static POPULATE_FORM_GROUP_ERRORS(
    rootFormGroup: FormGroup,
    errors: any
  ) {
    map(rootFormGroup.controls, (control, name) => {
      if (control instanceof FormControl) {
        if (errors.hasOwnProperty(name)) {
          control.setErrors(errors[name]);
        }
      }
      if (control instanceof FormGroup) {
        if (errors.hasOwnProperty(name)) {
          FormHelper.POPULATE_FORM_GROUP_ERRORS(control, errors[name]);
        }
      }
      if (control instanceof FormArray) {
        if (errors.hasOwnProperty(name) && errors[name] instanceof Array) {
          this.iterateOverFormArrayControl(control, errors[name]);
        }
      }
    });
  }

  private static iterateOverFormArrayControl(
    formArray: FormArray, 
    errors: any[]
  ) {
    errors.forEach((error: any, index: number) => {
      const arrayControl = formArray.at(index);
      if (arrayControl && arrayControl instanceof FormControl) {
        arrayControl.setErrors(error);
      }
      if (arrayControl && arrayControl instanceof FormGroup) {
        FormHelper.POPULATE_FORM_GROUP_ERRORS(arrayControl, error);
      }
      if (arrayControl && arrayControl instanceof FormArray && error instanceof Array) {
        FormHelper.iterateOverFormArrayControl(arrayControl, error);
      }
    });
  }
}

With the use of this form helper, my form now looks like:

// ... Somewhere at the top
import { FormHelper } from '@app/commons/FormHelper';
// ...

// Example of incoming formErrors:
// (it can also be nested for nested forms)
// {
//    phone: {
//      phoneNumberNoMatch: "The input does not match..."
//    }
// }

@Input() public formErrors: ValidationErrors;
public detailsForm: FormGroup;

public ngOnInit() {
  this.createForm();
}

public ngOnChanges() {
  this.updateFormErrors(this.formErrors);
}

private createForm(account: AccountInterface) {
  this.detailsForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required]
  });
}

private updateFormErrors(errors: any) {
  if (this.detailsForm) {
    // Populate included form controls with errors
   FormHelper.POPULATE_FORM_GROUP_ERRORS(this.detailsForm, errors);
  }
}

`Generate error messages for reactive form controls in Angular 2/4 without manual input`

Answer №1

Similar questions

The Angular 2 Final Release is encountering an issue where it is unable to locate the module name with the

What is the most effective design pattern for managing constant strings in Typescript or Javascript?

Encountering an error with RouterLink: 'frequency' property is undefined

Having trouble with animation transition in Angular 6?

Securing the admin paths with Angular 6 and Firebase

What is the best way to showcase the chosen information?

Unable to set values to properties of an object within an Angular service

Upon attempting to send an HTTP POST request from Angular to Node using Express.js, the operation became stuck with a status 204 indicating no content. The

Ways to retain the Parent component event even after the child component has been rendered

Angular: Maximizing Output by Extracting Data from Outer and Inner Observables using RxJS

What could be causing the error when my file is running?

The dropdown function ceases to operate once Material UI components are integrated

Starting Out with Typescript Types - Unidentified term 'angular'

Problem with mapping nested form arrays in Angular

Guide to implementing Telegram authorization in an Angular application

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Using GraohQL to establish constraints for query parameters

Threading in Node.js for Optimized Performance

Redirect to login not working in Angular auth guard

Is it possible to integrate TypeScript 5.0 decorators into React components?