Get Angular FormGroup errors.md

It is possible to get an Angular component through the Chrome console. This allows you to inspect form controls, errors, etc.

1. Select the Angular component in the DevTools DOM
2. In the console you can use ng.getComponent($0).formGroup.valid where formGroup is the name of a public property that's an Angular FormGroup

You can use this function to get a list of all the errors in a form group.

var getFormErrors = (form) => {
    if (!form.controls) {
      // Return FormControl errors or null
      return form.errors ?? null;
    }
    
      const groupErrors = form.errors;
      // Form group can contain errors itself, in that case add 'em
      const formErrors = groupErrors ? { groupErrors } : {};
      Object.keys(form.controls).forEach((key) => {
        // Recursive call of the FormGroup fields
        const error = this.getFormErrors(form.get(key));
        if (error !== null) {
          // Only add error if not null
          formErrors[key] = error;
        }
      });
      // Return FormGroup errors or null
      return Object.keys(formErrors).length > 0 ? formErrors : null;
    }

getFormErrors(ng.getComponent($0).formGroup);