Populate field in JSONforms Dropdown with values depending on another Dropdown

Hello Group,

I am using the JSON Forms Angular package and i have a question regarding dynamics forms.

I have two dropdowns, where the second dropdown is dependant on the first one.
For example the first one is “country”, and the second one “state”.
Now when someone selects a country (e.g. “USA”) i would need the “state” dropdown to be populated with all states of the united states only. Of course, once the “country” dropdown is set to another country, the dependant “state” field must be cleared and populated with the states of the newly selected country

How would you go about solving the problem?

thanks in advance

Hi @Cornykid,

you basically have two different options:

  • Adapting the JSON (sub) schema for state whenever country is changed
  • Implementing a custom renderer for state which queries the data for country before showing its dropdown. If more useful to you, you could also combine the two inputs into one custom renderer.

Generally speaking I would avoid dynamically changing the JSON Schema during the lifetime of the form. This sometimes lead to weird patterns as the JSON Schema no longer is “the” schema for the data. Instead I would recommend the custom renderer approach as it’s the most flexible one.

As always this depends on your exact use cases :wink:

Hello @sdirix

First of all, thank you very much for your answer. You have definitely pushed us in the right direction.
We tried it with the custom render, but now we have the problem that we need to know which country was selected within our state renderer.

We were hoping that we could use the onchange() function to detect what the user has selected in the field and then somehow pass it to our renderer. But I have the feeling that the onChange function does not work with angular. I tried to output data to the console but it was never executed.

Do you have any idea how we can get the value selected in the country field inside our renderer?

Hi @Cornykid,

one way to access the overall data is to use the JsonFormsAngularService which is injected in the constructor, e.g. this.jsonformsService.getState().jsonforms.core.data. There you can then look up which country is selected.

You could do this in the mapAdditionalProps method and therefore just always have the current country available as a prop.

Hello again @sdirix
I managed to get my data, thanks for that.
But it would be still really helpful if the onChange() function would work.
It’s in the API documentation in any case, but we can´t apply it in our form.
And the docu talks about the react version.

In Angular we don’t have a onChange. Instead it’s an @Output called dataChange, see here

Hello, can you please share how can i do the following in Vue 3?

Hi @arjun99,

In Vue you can inject the form-wide state and dispatch via jsonforms and dispatch. This can be used to resolve the data of “other” fields, e.g. which country is selected in a state field.