How to get errors for individual array item?

General
1

I have a schema like

{
      type: 'object',
      properties: {
        obj_label: {
          type: 'string',
        },
        do_you_own_house: {
          type: 'string',
          enum: ['Yes', 'No'],
        },
        props: {
          type: 'array',
          title: 'Properties',
          items: {
            type: 'object',
            properties: {
              prop_description: {
                type: 'string',
                isCustomInput: true,
                title: 'Brief History of the Property',
              },
              est_value: {
                type: 'string',
                isCustomInput: true,
                title: 'What is the estimated value',
              },
              prop_street: {
                type: 'string',
                isCustomInput: true,
                title: 'Street Address of Property',
              },
              prop_city: {
                type: 'string',
                isCustomInput: true,
                title: 'City',
              },
            },
            required: ['prop_description', 'est_value'],
          },
        },
      },
    },

and uischema

{
      type: 'VerticalLayout',
      elements: [
        {
          type: 'Label',
          text: 'This is just label',
        },
        {
          type: 'Control',
          label: 'Do you own a house, condo, apartment or other residence?',
          scope: '#/properties/do_you_own_house',
          options: {
            format: 'radio',
          },
        },
        {
          type: 'Control',
          label: 'Enter the details of property below',
          header: 'Property',
          scope: '#/properties/props',
          rule: {
            effect: 'SHOW',
            condition: {
              scope: '#/properties/do_you_own_house',
              schema: {
                enum: ['Yes'],
              },
            },
          },
          options: {
            detail: {
              type: 'VerticalLayout',
              elements: [
                {
                  type: 'Control',
                  scope: '#/properties/prop_description',
                },
                {
                  type: 'Control',
                  scope: '#/properties/est_value',
                },
                {
                  type: 'Control',
                  scope: '#/properties/prop_street',
                },
                {
                  type: 'Control',
                  scope: '#/properties/prop_city',
                },
              ],
            },
          },
        },
      ],
    },
}

I have built a custom arraylayout renderer. Each array item object is represented within card component. This card component can be collapsed, my problem is I want to highlight the card component if it is collapsed and has errors. But currently all card components are highlighted even if there are no validation errors for that particular array item object.

Please help me out.

2

You need to manually determine the errors of your array entries and then you can mark them accordingly. You can look into the existing bindings how this is achieved there, i.e. this should work (untested):

const jsonforms = useJsonForms();
const arrayErrors = getSubErrorsAt(path, schema)({ jsonforms });

You can then check the instancePath of each error to map them to the appropriate array entry.