Rendering form with empty initialState and no validation errors

General
1

I used the example below:

  const initialData = {}
  const [stateData, setData] = useState(initialData);

  return (
    <div className="App">
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={initialData}
        renderers={materialRenderers}
        onChange={({ errors, data }) => setData(data)}
      />
    </div>
  );
}

export default App;

The required fields are marked as red - validation errors.
Is there any way to provide an empty initial state and to not have these validation errors ?

[original thread by j-zimnowoda]

2

Hi! At the moment we don’t directly support this use case. The validation errors are computed initially and on every data change and are used unconditionally. You can finde more information in the JSON Forms ticket #1567.

There are some approaches you could take at the moment to implement the desired behavior:

Implement custom renderers which only show the errors once you would like them to show. You could mostly wrap existing renderers and modify their errors prop for this.

Use the setErrors action whenever the errors change to set your own errors. Here you can filter all errors you don’t want to show at the moment. This is easier in Redux than in the standalone component at the moment.

You could also wrap Ajv with your own customized variant and filter all errors you don’t want to see this way. As your wrapped variant will be called each time data has changed you can effectively implement some of the mentioned use cases.

In general you can exchange the reducers used and implement your logic there.

I hope this helps :wink: