Content of errors prop only updates when i go through the form

Hi,

I work in a Vue.js project using a Json form organized into categories. Each category contains fields and some of them have the “required” option.
I have to check if these fields return an error and, in this case, display a pop-up that shows path errors. Otherwise, a commitData function is called.
Currently, I get the form errors with the “errors” property thanks to a function called with the @change property.
My problem is that the errors are only added to the “errors” prop when I switch category in the form. Therefore, i can’t check if all fields are validate before clicking on each category of the form and the user can call the commitData function before complete all required fields.
I’ve seen this topic which seems to be close to my problem but I can’t find a solution.

Did I miss something? Have you any idea to do that?

My versions : Vue 3 | Json Forms 3.0.0-rc.0

Thanks for the support !

Hi @ElouanRefpro,

JSON Forms runs the validation on the whole schema, so no matter whether a category is rendered it should output all errors.

Could it be that you are not rendering categories within JSON Forms but you render a separate form for each category you have? Depending on the implementation the corresponding json-forms is then only rendered when the category is visible and therefore the validation only run then. In that case you might want to validate yourself instead of relying on JSON Form’s validation. Internally we are using AJV for validation. You can just run AJV yourself on all schema/data pairs and thereby determine the errors.

Hi @sdirix,

Sorry for the delayed response, I have recently revisited the issue.

I juste have one schema so one form.
I customized the “CategorizationRenderer” to display all categories corresponding to my JSON schema. These are the categories I need to click on to add errors on the “errors” property.

I tried to run AJV on the schema/data pair of this exemple and it worked nicely. However, when i tried running AJV on the schema/data pair of my form, it didn’t work. I’m using the JsonForms component’s @change event to call a function that sets the form data in a property. However, the data extracted from this event just match with inputs that are filled on the form, and not with all inputs.

Let me explain. Let’s say I have a “main” category in JSON schema, wich has 4 fields : “title”, “email”, “phone” and “image”.
If I fill in the “title” and “email” inputs, the data extracted from de @change event will be :

{"main":{"title":"example","email":"example"}}

But if i give this data to AJV’s validate function according to the JSON schema with 4 input, it will not works.

I’ve been thinking about checking if all the inputs of the form are extracted before using AJV verification, but in this case, I don’t see the point of using AJV. I have also thought about setting defaults values for all fields, but it’s laborious (I have around fifty fields).

Is there another way to extract data from the form ? Do you have any other ideas for validating all the fields of the form ?

Thanks for your help.

Hi @ElouanRefpro,

Without a concrete example it’s hard to diagnose what is going on. As said before, JSON Forms is set up in a way that it will always validate the whole schema/data. Even with a custom CategorizationRenderer this should not go wrong. Can you try using the default CategorizationRenderer and just specifying you categories manually via the UI Schema?

Note that there are some specialties to JSON Schema validation. For example if some properties of an object are marked required but the object itself does not even exist, then you will also not get a validation error for them. Maybe this is what’s happening for you?

Okay, my previous message may have been unclear. I forgot to inspect the CategorizationRenderer component’s logic and this is probably the source of the problem. Let me provide some more detail.

I have one JSON schema that contain the data information and one UI schema that include the form structure, wich includes Categorization. Here is an exemple :

UI schema example
{
  "type": "Categorization",
  "elements": [
    {
      "type": "Category",
      "label": "Category 1",
      "scope": "testScope",
      "elements": [
        {
          "type": "HorizontalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/main/properties/title",
              "label": "Title"
            },
            {
              "type": "Control",
              "scope": "#/properties/main/properties/email",
              "label": "Email"
            },
            {
              "type": "Control",
              "scope": "#/properties/addProductChecked",
              "label": "Product Adding"
            }
          ]
        },
        {
          "type": "HorizontalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/main/properties/websiteUrl",
              "label": "Domain Name"
            },
            {
              "type": "Control",
              "scope": "#/properties/main/properties/zip",
              "label": "ZIP"
            }
          ]
        },

In the CategorizationRenderer, I retrieve the form categories in a list. I then loop through each of these categories to display Vuetify tabs :

CR tab part

When a tab is selected, a window pops up and displays the fields related to the selected category. This is achieved thanks to the the dispatch-renderer component that uses the schemas part of the selected category :

CR window part

Here is how it looks :

I tried to use the default CategorizationRenderer and all errors are recovered. I think the behavior of v-window component is preventing the errors from being send before clicking on a category because it is not displayed and so doesn’t exist, as you said.

I really need to keep the categories in tabs. Do you know how to work around this behavior ?

The code you posted looks fine on the first glance.

Note that the data and errors are maintained within a central JSON Forms store (per form) and should not be influenced at all by the respective renderers. So the custom Categorization renderer as shown here should not have any effect on the data and errors as it seems to be correctly implemented via the dispatch-renderer.

Is this the only custom renderer you have? Our renderers by default do not modify the stored data just by rendering and therefore rendering should not influence data and errors. However if you have a custom renderer which modifies data on the fly then you might experience the problem as described. If you use this pattern then I would suggest against it as one then runs into weird edge cases like the problem described.