Collect and Print Form Errors in an Angular Reactive Form

printFormErrors_fn.md

Here’s a JavaScript console helper you can paste into the browser DevTools.

You pass:

• The Angular component instance (usually accessible as ng.getComponent($0) in dev mode)
• The FormGroup property name (string)

It will recursively collect all controls with errors, including nested FormGroup and FormArray, and print them clearly.

---

✅ Usage Example (Angular Dev Mode)

1. Select the component element in Chrome DevTools.
2. Run:

const cmp = ng.getComponent($0);
printFormErrors(cmp, 'myForm'); // replace 'myForm' with your FormGroup name

---

🧠 Console Script

function printFormErrors(component, formGroupName) {
  if (!component) {
    console.error('Component instance not provided.');
    return;
  }

  const form = component[formGroupName];

  if (!form) {
    console.error(`FormGroup "${formGroupName}" not found on component.`);
    return;
  }

  const errorsList = [];

  function collectErrors(control, path = '') {
    if (!control) return;

    // If control has errors, store them
    if (control.errors) {
      errorsList.push({
        controlPath: path,
        errors: control.errors,
        value: control.value,
        status: control.status
      });
    }

    // Handle FormGroup or FormArray
    if (control.controls) {
      if (Array.isArray(control.controls)) {
        // FormArray
        control.controls.forEach((child, index) => {
          collectErrors(child, `${path}[${index}]`);
        });
      } else {
        // FormGroup
        Object.keys(control.controls).forEach(key => {
          const newPath = path ? `${path}.${key}` : key;
          collectErrors(control.controls[key], newPath);
        });
      }
    }
  }

  collectErrors(form);

  if (errorsList.length === 0) {
    console.log('✅ No form control errors found.');
  } else {
    console.group(`❌ Found ${errorsList.length} control(s) with errors`);
    errorsList.forEach(err => {
      console.group(`Control: ${err.controlPath}`);
      console.log('Errors:', err.errors);
      console.log('Value:', err.value);
      console.log('Status:', err.status);
      console.groupEnd();
    });
    console.groupEnd();
  }

  return errorsList;
}

---

🔎 What It Handles

• FormControl

• FormGroup (nested)

• FormArray

• Deeply nested structures

• Prints:

  • Full control path
  • Errors object
  • Current value
  • Status

--