Recommended approach of autosaving form data on field level

I have a large form rendered by the JsonForms component. By just storing the data when user hits a “submit” button is not enough, it is required that each field is stored after updating it (when it does not contain any errors). The data needs to be sent to server on field-level (not the whole form).

I was thinking I could use a custom renderer that watches changes on its own input/field, and sends that to the server in case there aren’t any errors for the field. Using this approach, the JsonForm onChange event is not really used.

Is the approach described here something that can work in your view? Do you have any other approach you can recommend? Thanks in advance!

Hi @jdwit,

using custom renderers for this is definitely an approach that can work. Note that you still need to invoke the handleChange prop so that JSON Forms can update the data and execute the validation or you need to invoke the validation yourself before transferring the data.

We also sometimes have use cases like this but we then use a different approach. We listen to the data changes outside of JSON Forms, diff the “before” and “after” data and generate a JSON Patch describing the changes. A good library for this is fast-json-patch. You could to the same and either work with JSON patches yourself or transform this into the format you need for your API calls.