eclipsesource / eclipsesource/jsonforms

Option to clear value of form control when it gets disabled

Open
#2,412 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.7k
Forks
424
Avg merge
17d 8h
Merged PRs (30d)
1

Description

### 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:
```json
{
"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:
```json
"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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.