Option to clear value of form control when it gets disabled

[AtjonTV]

Is your feature request related to a problem? Please describe.

I am building an application in Vue that has a huge form with optional fields. I control the availability of the fields with enable rules in the UI schema and required conditions in the data schema.

Here is a typical example of an UI element:

{
              "type": "HorizontalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/common/properties/typeOfGeneticDiabetes",
                  "options": {
                    "vuetify": {
                      "v-autocomplete": {
                        "variant": "outlined"
                      }
                    }
                  }
                },
                {
                  "type": "Control",
                  "scope": "#/properties/common/properties/mutationOfGeneticDiabetes",
                  "options": {
                    "vuetify": {
                      "v-text-field": {
                        "variant": "outlined"
                      }
                    }
                  },
                  "rule": {
                    "effect": "ENABLE",
                    "condition": {
                      "scope": "#/properties/common/properties/typeOfGeneticDiabetes",
                      "schema": {
                        "not": {
                          "const": "MODY"
                        }
                      }
                    }
                  }
                }
              ]
            }

And here is the required condition from the data schema:

"allOf": [
        {
          "if": {
            "required": ["typeOfGeneticDiabetes"],
            "properties": {
              "typeOfGeneticDiabetes": {
                "not": {
                  "const": "MODY"
                }
              }
            }
          },
          "then": {
            "required": ["mutationOfGeneticDiabetes"]
          }
        }
]

What I need is the ability to have fields like "mutationOfGeneticDiabetes" be cleared, when its toggle field "typeOfGeneticDiabetes" is set to a falsy condition (in this case the "typeOfGeneticDiabetes" is set to "MODY").

Describe the solution you'd like

Add an "clearValueOnDisable" toggle to form controls (in its "options" object) to have their value cleared when they get disabled. Then the toggle could be selectively applied to the fields in UI schema where it is needed.

Describe alternatives you've considered

The only options to consider where:

1. processing the data before storing it in a database, which presents the issue that special logic can become out of sync with the forms result (data schema) over time. Currently, the form has 2000 lines of UI Schema and 1800 lines of Data Schema.
2. forking JsonForms to implement the option. Though due to the rather complex source code structure, I was not able to find the place where I would implement the feature.

Package

Vue Vuetify Renderers, Vue Bindings, Core

Additional context

No response

[sdirix]

Hi @AtjonTV,

Conceptually we don't do any automatic data manipulation in JSON Forms based on UI rendering. When introducing features like this, it's easy to get weird edge cases. For example if you use categories, then the nested enable/hide rules would only be executed for the currently active category. So only disabled fields of that category are cleared, but not of all the others.

The cleanest solution is to use a middleware and in there delete properties once you no longer need them. The challenge here is to design this in a way so you don't repeat yourself between the UI Schema and your middleware functionality.

A UI-based solution (with all of the mentioned downsides), could be to implement a CATCH-ALL renderer for properties. That one would just check the enabled state and automatically delete its data if false. Then it dispatches back to JSON Forms but takes itself out of the suggested renderers. Thereby the "original" renderer can participate and render the usual UI.

Forking is of course always possible. The rules are for example evaluated here. However there you can't do (or rather should not do) any data manipulation. So instead you would add this to the Vue-Vuetify bindings, for example here you could check the enabled state and trigger a change if false. But then we're back to a UI based solution.

---

Generally you need some kind of backend/database protection/validation though. You can't rely on the UI to protect your database as this is easily circumvented.

[AtjonTV]

@sdirix thank you for that information.

Currently, I verify the data against the data json-schema on the server, before allowing it to enter the database. But from what I can see, I can't define rules like "if a is not b, then c must be empty" in the data schema.

Not sure what the best solution here is, without writing very data-schema specific code, which I want to avoid.