# Displaying Nested Errors

**URL:** <https://jsonforms.discourse.group/t/displaying-nested-errors/2416>\
**Category:** General\
**Created:** [October 31, 2024, 5:09pm UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416 "2024-10-31T17:09:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MRides](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MRides](https://jsonforms.discourse.group/u/MRides)\
**Post date:** [October 31, 2024, 5:09pm UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/1 "2024-10-31T17:09:19Z")

</div>

The nested object error is not displaying  
Schema:` homePhone: { type: "object", required: ["phone_number", "country_code", "country"], properties: { phone_number: { type: "string", minLength: 1 }, country_code: { type: "string" }, country: { type: "string" }, }, },`  
UISchema:

```auto
    {
              type: "Control",
              scope: "#/properties/homePhone",
              renderer: "PhoneInputControl",
            },

```

The error gets generated, but it is not available within the props of the component:  
This is the error that was logged:

```auto
{
    "instancePath": "/homePhone/phone_number",
    "schemaPath": "#/properties/homePhone/properties/phone_number/minLength",
    "keyword": "minLength",
    "params": {
        "limit": 1
    },
    "message": "must NOT have fewer than 1 characters",
    "schema": 1,
    "parentSchema": {
        "type": "string",
        "minLength": 1
    },
    "data": ""
}

```

These are the ControlProps that were logged out:

```auto
{
    "uischema": {
        "type": "Control",
        "scope": "#/properties/homePhone",
        "renderer": "PhoneInputControl"
    },
    "schema": {
        "type": "object",
        "required": [
            "phone_number",
            "country_code",
            "country"
        ],
        "properties": {
            "country": {
                "type": "string"
            },
            "country_code": {
                "type": "string"
            },
            "phone_number": {
                "type": "string",
                "minLength": 1
            }
        }
    },
    "path": "homePhone",
    "enabled": true,
    "renderers": [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
    ],
    "cells": [
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {}
    ],
    "id": "#/properties/homePhone",
    "data": {
        "phone_number": "",
        "country_code": "1",
        "country": "us"
    },
    "errors": "",
    "label": "Home Phone",
    "visible": true,
    "required": true,
    "config": {
        "restrict": false,
        "trim": false,
        "showUnfocusedDescription": false,
        "hideRequiredAsterisk": false
    },
    "rootSchema": {
        "type": "object",
        "required": [
            "lastName",
            "firstName",
            "email",
            "homePhone",
            "mobilePhone",
            "termsOfService"
        ],
        "properties": {
            "zip": {
                "type": "string"
            },
            "city": {
                "type": "string"
            },
            "email": {
                "type": "string"
            },
            "state": {
                "type": "string"
            },
            "title": {
                "enum": [
                    "Mr",
                    "Mrs",
                    "Ms",
                    "Rabbi",
                    "Reb",
                    "Rebbetzin",
                    "Dr"
                ],
                "type": [
                    "string",
                    "null"
                ]
            },
            "gender": {
                "enum": [
                    "Male",
                    "Female"
                ],
                "type": [
                    "string",
                    "null"
                ]
            },
            "address": {
                "type": "string"
            },
            "company": {
                "type": "string"
            },
            "lastName": {
                "type": "string"
            },
            "optToSms": {
                "type": "boolean"
            },
            "firstName": {
                "type": "string"
            },
            "homePhone": {
                "type": "object",
                "required": [
                    "phone_number",
                    "country_code",
                    "country"
                ],
                "properties": {
                    "country": {
                        "type": "string"
                    },
                    "country_code": {
                        "type": "string"
                    },
                    "phone_number": {
                        "type": "string",
                        "minLength": 1
                    }
                }
            },
            "mobilePhone": {
                "type": "object",
                "required": [
                    "country_code",
                    "phone_number",
                    "country"
                ],
                "properties": {
                    "country": {
                        "type": "string"
                    },
                    "country_code": {
                        "type": "string"
                    },
                    "phone_number": {
                        "type": "string",
                        "minLength": 1
                    }
                }
            },
            "optToEmails": {
                "type": "boolean"
            },
            "termsOfService": {
                "type": "boolean"
            },
            "aliyahInformation": {
                "type": "object",
                "properties": {
                    "kohenLeviYisroel": {
                        "enum": [
                            "Kohen",
                            "Levi",
                            "Yisroel"
                        ],
                        "type": "string"
                    },
                    "last_name_hebrew": {
                        "type": "string",
                        "title": "שם משפחה"
                    },
                    "first_name_hebrew": {
                        "type": "string",
                        "title": "שם"
                    },
                    "father_name_hebrew": {
                        "type": "string",
                        "title": "שם האב"
                    },
                    "mother_name_hebrew": {
                        "type": "string",
                        "title": "שם האם"
                    }
                }
            }
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 4, 2024, 11:38am UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/2 "2024-11-04T11:38:32Z")

</div>

Hi!

The error is correctly shown for me

 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/4/43db49fce198c1a18cb6cb329b32ff387055ebbc.png)

Which JSON Forms version, binding and renderers are you using?

---

<div class="post-metadata">

**Author:** ![MRides](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MRides](https://jsonforms.discourse.group/u/MRides)\
**Post date:** [November 5, 2024, 5:43pm UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/3 "2024-11-05T17:43:15Z")

</div>

“@jsonforms/core”: “^3.0.0”,  
“@jsonforms/material-renderers”: “^3.0.0”,  
“@jsonforms/react”: “^3.0.0”,

I am using a control input control - source code below:  
I tried logging out the errors, but it returns an empty array.  
However, I do know that the error is getting generated as the submit button is greyed out if the input contains less than the required amount of digits

```auto
import { withJsonFormsControlProps } from "@jsonforms/react";
import { ControlProps } from "@jsonforms/core";
import { PhoneInput } from "../../../../components/inputs/PhoneInput";

const PhoneInputControl = (props: ControlProps) => {
  const { data, handleChange, path, label, errors } = props;
  console.log("errors", errors);

  return (
    <PhoneInput
      value={data?.phone_number}
      onChange={(phone, country_code, country) => {
        if (phone.replace(`+${country_code}`, "") || data?.phone_number) {
          handleChange(path, {
            phone_number: phone.replace(`+${country_code}`, ""),
            country_code,
            country,
          });
        }
      }}
      countryId={""}
      variant="standard"
      label={label}
      fullWidth
      error={errors ? true : false}
    />
  );
};

export default withJsonFormsControlProps(PhoneInputControl);

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 6, 2024, 9:32am UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/4 "2024-11-06T09:32:31Z")

</div>

Hi @MRides,

It seems that your custom controls manages the whole object and not only the phone number. At the moment we do not return all sub errors of the object via the bindings, just errors related to the object itself.

You should be able to determine the child errors like this:

```auto
const jsonforms = useJsonForms();
const childErrors = getSubErrorsAt(path, props.schema)(jsonforms);

```

---

<div class="post-metadata">

**Author:** ![MRides](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@MRides](https://jsonforms.discourse.group/u/MRides)\
**Post date:** [November 6, 2024, 3:26pm UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/5 "2024-11-06T15:26:12Z")

</div>

Thanks for your help. Here is my updated component

```auto
import { withJsonFormsControlProps, useJsonForms } from "@jsonforms/react";
import { ControlProps, getSubErrorsAt } from "@jsonforms/core";
import { PhoneInput } from "../../../../components/inputs/PhoneInput";

const PhoneInputControl = (props: ControlProps) => {
  const { data, handleChange, path, label, errors } = props;
  const jsonforms: any = useJsonForms();
  const childErrors = getSubErrorsAt(path, props.schema)(jsonforms);
  console.log("childErrors", childErrors);
  console.log("phonedata", data);
  console.log("props", { ...props });
  return (
    <PhoneInput
      value={data?.phone_number}
      onChange={(phone, country_code, country) => {
        if (phone.replace(`+${country_code}`, "") || data?.phone_number) {
          handleChange(path, {
            phone_number: phone.replace(`+${country_code}`, ""),
            country_code,
            country,
          });
        }
      }}
      countryId={""}
      variant="standard"
      label={label}
      fullWidth
      error={errors ? true : false}
    />
  );
};

export default withJsonFormsControlProps(PhoneInputControl);

```

This is causing the following error:  
Uncaught TypeError: Cannot read properties of undefined (reading ‘core’)

(Note that I had to set the type of jsonforms to any, otherwise I got the following ts error:  
Argument of type ‘JsonFormsStateContext’ is not assignable to parameter of type ‘JsonFormsState’.  
Property ‘jsonforms’ is missing in type ‘JsonFormsStateContext’ but required in type ‘JsonFormsState’  
)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 7, 2024, 7:28am UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/6 "2024-11-07T07:28:41Z")

</div>

My code snippet was not accurate, this is how you need to invoke `getSubErrorsAt`:

```auto
const jsonforms = useJsonForms();
const childErrors = getSubErrorsAt(path, props.schema)({ jsonforms });

```

---

<div class="post-metadata">

**Author:** ![srichez888](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/srichez888/32/1203_2.png) [@srichez888](https://jsonforms.discourse.group/u/srichez888)\
**Post date:** [January 17, 2025, 2:27pm UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/7 "2025-01-17T14:27:43Z")

</div>

Hello,  
That works if the hierarchy structure in the forms follow the one from the JSON Schema.  
But if there is Category that contains Control from different scope (path) anywhere in the JSONSchema, how to get from the Category Renderer all errors from the sub controls.  
The idea is to display on a tab, the number of errors inside a tab.  
I have a prototype working just by doing a basic query selector on the Dom to get the sub Elements error but I would like to see if it is achievement by using JsonForms Code.  
Thanks.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [January 17, 2025, 2:43pm UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/8 "2025-01-17T14:43:12Z")

</div>

Hi @srichez888,

Sadly we don’t offer a built-in mechanism for this use case. You will need to iterate through the UI Schema and collect all errors of all nested controls manually then.

---

<div class="post-metadata">

**Author:** ![srichez888](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/srichez888/32/1203_2.png) [@srichez888](https://jsonforms.discourse.group/u/srichez888)\
**Post date:** [January 18, 2025, 10:51am UTC](https://jsonforms.discourse.group/t/displaying-nested-errors/2416/10 "2025-01-18T10:51:05Z")

</div>

Hello,

I have been able to have something working by doing the following in the category renderer to achieve such UI  
 ![Capture](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/1/1e2791430a25e453206470f489e1d315e3ea33d6.png)

```auto
const hasNestedError = (category):boolean => {
      const jsonforms = useJsonForms();
      const errorSchemaPaths = jsonforms.core.errors.map(x=>x.schemaPath);
      const nestedUISchemaScopes = getNestedUISchemaScopes(category.value.uischema);
      return errorSchemaPaths.some( errorSchemaPath => 
         nestedUISchemaScopes.some(nestedUISchemaScope => 
            errorSchemaPath.startsWith(nestedUISchemaScope)
      ));
    }

```

```auto
export const getNestedUISchemaScopes = (uischema:Layout):string[] => {
  const result:string[] = [];
  const scan = (uischema:Layout) => {
    for(const subUISchema of uischema.elements) {
      if (isLayout(subUISchema)) 
         scan(subUISchema);
      else {
        if (isControl(subUISchema)) result.push(subUISchema.scope);
      }
    }  
  }
  scan(uischema);
  return result;
}

```

The code is based on all errors but I should only care about error under the current instancePath but I didn’t know how.  
Thanks for your help.

Regards,  
Sebastien