Required error is not working as expected when rules are present

General
1

Issue1: Let’s say fieldB is required only if fieldA has a value C1. When I use the rule, it works fine. However when I clear the value from fieldA the required error still remains.

Issue 2:
While using the required rule, the error message is displayed properly, however, the required property is false inside the input component. If we have to show an asterisk for required items, then it doesn’t work while using conditional required.

image
image1919×1005 85.2 KB

Repo (for both issues): GitHub - collegewap/jsonforms-react-seed at issue-2

2

Schema: https://github.com/collegewap/jsonforms-react-seed/blob/issue-2/src/schema.json

UISchema: https://github.com/collegewap/jsonforms-react-seed/blob/issue-2/src/uischema.json

3

Screenshots (for issue1): Screenshots: Required issue · Issue #1 · collegewap/jsonforms-react-seed · GitHub

4

Hi @collegewap,

The linked schema behaves as expected

{
  "type": "object",
  "properties": {
    "productAccess_dc": {
      "type": "string"
    },
    "requestType": {
      "type": "string"
    }
  },
  "required": [],
  "allOf": [
    {
      "if": {
        "properties": {
          "requestType": {
            "const": "C1"
          }
        }
      },
      "then": {
        "required": ["productAccess_dc"]
      }
    }
  ]
}

The if-schema also returns true when requestType is undefined. That is default JSON Schema behavior, which you can easily test with an online validator like this one. As the if-schema successfully validates when requestType is not set, productAccess_dc will be required.

If you only want the if-schema to successfully validate when requestType is set AND is of value C1, then you need to add an additional required, e.g.

      "if": {
        "properties": {
          "requestType": {
            "const": "C1"
          }
        },
        "required": ["requestType"]
      },

Issue 2:
While using the required rule, the error message is displayed properly, however, the required property is false inside the input component. If we have to show an asterisk for required items, then it doesn’t work while using conditional required.

This is a limitation of the JSON Forms bindings. Our bindings are only able to consider statically required properties. So in case of conditional required our required prop will always be false. To workaround this you can use custom renderers which are able to understand the dynamic required use cases in your schemas.