Unable to submit form after dynamically updating dropdown from array items in the same form

General
1

Hi @sdirix

What I want to achieve is, that users can create items and packages in the same form, and for each item select the package the item is packed to from a dropdown.
While this works (the dropdown is properly populated with the name of each package dynamically), I am stuck with the fact, that when I select a value of a package that is created during the same form editing process, the field shows an evaluation error for the enum.

Situation
I have the following situation in my vue-vanilla form:

  • I have another array controller to collect “boxes”-objects
  • I have an array controller to collect “items”-objects
  • In every item, I have an enum dropdown where users should select one of the items from the boxes array by it’s name field
  • I have a jsonforms component that receives it’s schema from a component data object (reactive)

Approach

  • create the form schema with an item array and an enum item property “package”
  • define a single default enum value “Unpacked” for the package property of the item
  • load original schema into my component data “schema”
  • load form data into my component data “formData”
  • place jsonform component into template of my component, modelling its schema to my component data “schema”, and modelling its data to “formData”
  • add a watcher for “formData” to update “schema” by adding enum values for each package item in the data

Expectation

  • change in “schema” triggers the dispatch function and updates the jsonforms controller with the new schema
  • dropdown is updated with all package item values
  • form can be submitted with any value from the dropdown

Observations

  • default value can always be selected and the form saved
  • when creating package items in the form, their respective entry is added to the dropdown to be selected
  • when selected, the field shows an error “must be equal to one of the allowed values”, even though in the Vue Inspector, the data provided in jsonforms.core.errors suggests, that the data entered is in fact an allowed value …
    image
    image1296×1016 101 KB

Unfortunately, this causes the form to be invalid, so I cannot save it. Any idea what’s happening here?

2

Hi @kimamil,

Is the whole JSON Schema updated or do you just do an update deeply within the schema? If the latter, the json-forms component will not realize that the schema was modified and the validation will still run with the old schema.

To update the schema appropriately I would like to recommend lodash’s fp/set which not only updates the nested property but also all parent objects/arrays. Then please hand over this new schema to json-forms and it should work.

While this works I would in general recommend a different approach: Instead of modeling and modifying the enum within the JSON Schema I would implement a custom enum renderer. This enum renderer can then collect their elements via arbitrary logic. If possible you can also specify this logic in the JSON Schema so you can from then on declaritively specify the dynamic enums instead of relying on additional update logic outside of the form.

3

Hi @sdirix,

thank you for the explanation. I was indeed doing a deep update which didn’t seem to work all through. Using Underscore’s equivalent to lodash solved the issue.

I will consider the custom enum renderer approach in future projects.

Best regards
Manuel