Is there a way to have conditionnal elements?
mikaoelitiana opened this issue · comments
Prerequisites
- I have read the documentation;
- In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
Description
I want to add conditions in my forms so that some fields will be displayed depending on value of other fields.
Expected behavior
When I create a form with conditions, all fields are not displayed yet. When I enter or select an input value, the condition is evaluated to see if some other field should be enable or disabled
As a suggestion, the JSON Schema Dependencies provides examples on how that would be achieved at the schema level and it's treating the case you are also referring to in the section Schema dependencies. I think that would be a good starting point. I'm currently also trying to figure out if the JSON Schema Form supports it.
This should be achieved by computing a new form schema from within the onSubmit handler, according to received values; that's certainly the best place to write your own conditional logic, using plain old js. This has been already discussed in issues, and I've provided examples how to do that.
I don't have the time for searching these atm, but if you find it back it'd be great to add an entry in the FAQ section of the README, as this question gets often asked.
For anyone else wondering about this, here's a working example using component state: https://jsfiddle.net/69z2wepo/68259/
@mikaoelitiana thanks, it's a great example. Would you mind contributing it to the README? :)
Is there any way to do this for each item in an array?
@inostia: Have you any idea how can we do it in "Array" type schema means
There will be checkbox with in each object with will show particular object textbox based on it's value change
this example listed above may not be helpful as it steps outside the definition and requires conditional coding. if i have tens of conditional elements this does not scale. a better answe would be dependencies in the schema as suggested above.
also, it cannot be generated ahead of time, like from a server.
rjsf doesn't support schema or property dependencies and at present we don't have any specific plans to implement it. (Nobody has even opened an issue about it.) Another approach is to implement anyOf as described in #52. But I think Niko's point in the above comments is that in React, we have other, more powerful tools available to us, such as updating the rjsf props to have a different schema according to the component's current state.
understood, it's doable with VDOM. it's about being able to define in schema that is of concern to me. this way, all the characteristics are captured in it.
It's really powerful to be able to transform the schema (or uiSchema) on the client side, but here are
some use cases for supporting schema dependencies:
-
you can do the same validation on the server as you can do on the server. If the client dynamically
modifies the schema, the server is unable to do all the validations and will potentially accept invalid data. -
json schema dependencies are declarative. You have to understand the schema only to understand the form, and you don't have to trace JS schema transformation code.
I wonder whether you can solve the first issue by doing schema transformation on the server, but that seems even more involved -- the server would have to duplicate logic that's on the client to make sure to transform the schema to the proper one dependent on the data itself.
@exchgr have you solved your problem? I have encountered the same problem that I need conditional elements in array
I haven't worked on this in over a year, sorry