Validation required of object

General
1

In the errors state i have

{
  data: {
    value: "Poor",
    comment: undefined
  },
  instancePath: "/fan/condition",
  keyword: "required",
  message: "must have required property 'comment'",
  params: {
    missingProperty: "comment"
  },
  parentSchema: {
    required: ["comment"]
  },
  schema: ["comment"],
  schemaPath: "#/allOf/0/then/properties/fan/properties/condition/required"
};

But in the customer render JsonFormsControl if i try to check the form it shows the value of object {value: “Poor”, comment: undefined}, but the error is null in the component how i can get that for that form object i have error validation

2

Hi @daniela
Could you please post your used renderer set, schema and ui schema for further analysis.
The schema path #/allOf/0/then/properties/fan/properties/condition/required in your posted error indicates a quite complex schema using allOf and if/then/else.

Best regards,
Lucas

3

Hey @lucas-koehler,
the allOf object

"allOf": [
    {
      "if": {
        "properties": {
          "fan": {
            "properties": {
              "condition": {
                "properties": {
                  "value": {
                    "const": "Poor"
                  }
                }
              }
            }
          }
        }
      },
      "then": {
        "properties": {
          "fan": {
            "properties": {
              "condition": {
                "required": [
                  "comment"
                ]
              }
            }
          }
        }
      }
    }
  ]

  "fan": {
      "type": "object",
      "default": {},
      "properties": {
        "condition": {
          "type": "object",
          "properties": {
            "value": {
              "$ref": "#/definitions/serRepAppraisalOptions"
            },
            "comment": {
              "type": "string"
            }
          }
        }
      }
    }

the ui schema:

{
      "type": "Category",
      "label": "Fan",
      "section": "fan",
      "elements": [
        {
          "type": "Control",
          "label": "Condition",
          "instancePath": "condition",
          "description": "",
          "scope": "#/properties/fan/properties/condition",
          "item": true,
          "options": {
            "comment": true,
            "placeholder": "Condition",
            "errorMessage": "",
            "select": true
          }
        }
      ]
    }

I’m not sure if this will help you understand how I’ve defined the schema and UI schema. Just to clarify, the error appears as “required” when the value is “Poor.” However, since I’m using a custom component to render both the value and the comment object, when I try to check the error value inside the comment object, it shows as null.

4

Hi @daniela,
thanks for the update. Can you post your custom renderer or at least the part where you export it (e.g. something like export default withJsonFormsControlProps(MaterialIntegerControl);) and where you get the errors? They might be filtered out for your scope.
Best regards,
Lucas

5

Hi @lucas-koehler,
I’m working with angular so my custom component looks like this

export class JsonformsSelectComponent extends JsonFormsControl implements OnInit, OnDestroy {
  constructor(jsonformsService: JsonFormsAngularService) {
    super(jsonformsService)
  }
  override ngOnInit(): void {
    super.ngOnInit()
    this.checkErrorValue()
}
  checkErrorValue(): void {
    this.jsonFormsService.$state.pipe(takeUntil(this.destroy$)).subscribe(() => {
      console.log(this.error, this.form, this.propsPath)
    })
  }

and in the state, I have an error that “must have required property ‘comment’”. But in the component, if i log the error is null. Also mention that this custom component in the form the value is object {value: ‘Poor’, comment: ‘undefined’} because i need the custom component to render the values of the object.

6

If I understand correctly then you have a custom renderer for an object for which one of the properties are missing.
In our off-the-shelf renderers we don’t show errors on objects, as the users usually can’t interact with these objects to solve them. Instead we show errors on the properties, including the required error.

If your requirements are different, then you can determine the errors you want to show yourself within your custom renderer. As you have access to the jsonFormsService you can querry the core.errors array and filter accordingly.

Likely you want to do something similar as we do for arrays, i.e. determine the errors for the element itself as well as of all its children. The code should be similar. See here and here.