Errors in nested object that uses custom rating field not handled properly

General
1

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

I implemented the star rating control custom renderer example in my code.
I intend to use it in a form where users review multiple issues by giving a mandatory rating and an optional description
I have the following schema and uischema

schema = {
    type: "object",
    properties: {
      productReview: {
        type: "object",
        properties: {
          rating: {
            type: "number",
          },
          description: {
            type: "string",
          },
        },
      },
      customerServiceReview: {
        type: "object",
        properties: {
          rating: {
            type: "number",
          },
          description: {
            type: "string",
          },
        },
      },
    },
  };
uischema = {
    type: "VerticalLayout",
    elements: [
      {
        type: "Control",
        scope: "#/properties/productReview/properties/rating",
      },
      {
        type: "Control",
        scope: "#/properties/productReview/properties/description",
        options: { multi: true },
      },
      {
        type: "Control",
        scope: "#/properties/customerServiceReview/properties/rating",
      },
      {
        type: "Control",
        scope: "#/properties/customerServiceReview/properties/description",
        options: { multi: true },
      },
    ],
  };

I want to make the {field}.rating field required and see it among the errors in the JsonForms component’s onChange prop.

When I add the required as shown below, the errors array has no errors even though the ratings haven’t been added yet.

schema = {
    type: "object",
    properties: {
      productReview: {
        type: "object",
        properties: {
          rating: {
            type: "number",
          },
          description: {
            type: "string",
          },
        },
        required: ['rating']
      },
      customerServiceReview: {
        type: "object",
        properties: {
          rating: {
            type: "number",
          },
          description: {
            type: "string",
          },
        },
        required: ['rating']
      },
    },
  }

When I add the required as shown below, the errors array has the 2 errors, but they don’t go away even after I add the ratings.

schema = {
    type: "object",
    properties: {
      productReview: {
        type: "object",
        properties: {
          rating: {
            type: "number",
          },
          description: {
            type: "string",
          },
        },
      },
      customerServiceReview: {
        type: "object",
        properties: {
          rating: {
            type: "number",
          },
          description: {
            type: "string",
          },
        },
      },
    },
    required: ["productReview.rating","customerServiceReview.rating"],
  }

I’m using whether the form has errors in the errors array to determine whether to disable the submit button.
What can I do to ensure that the error goes away after a user enters the rating?

2

Hi @edkahara,

  • rating is a nested property, so it will only show as an error when the parent object exists.
  • nested properties can not be set as required from their grandparent, only from their parent. Therefore required: ["productReview.rating","customerServiceReview.rating"] does not specify that the nested rating property is required, it specifies that a property with the name "productReview.rating" is required.

I would recommend setting the intermediate objects also as required:

 {
  "type": "object",
  "properties": {
    "productReview": {
      "type": "object",
      "properties": {
        "rating": {
          "type": "number"
        },
        "description": {
          "type": "string"
        }
      },
      "required": ["rating"]
    },
    "customerServiceReview": {
      "type": "object",
      "properties": {
        "rating": {
          "type": "number"
        },
        "description": {
          "type": "string"
        }
      },
      "required": ["rating"]
    }
  },
  "required": ["productReview", "customerServiceReview"]
}

However by default our object renderers do not show errors. To avoid that you can use the default to initialize the objects, e.g.

{
  "type": "object",
  "properties": {
    "productReview": {
      "type": "object",
      "properties": {
        "rating": {
          "type": "number"
        },
        "description": {
          "type": "string"
        }
      },
      "required": ["rating"],
      "default": {}
    },
    "customerServiceReview": {
      "type": "object",
      "properties": {
        "rating": {
          "type": "number"
        },
        "description": {
          "type": "string"
        }
      },
      "required": ["rating"],
      "default": {}
    }
  },
  "required": ["productReview", "customerServiceReview"],
  "default": {}
}

and enable default support.

1 Like