How to add Custom renderer validation errors from json forms ajv errors

General
1

Hi,

Is there a way to add errors from custom renderer. I am trying to add an error from custom renderer but its not working. Not sure what is wrong. For an example sake, i created a autocomplete custom renderer and when a specific value is selected “I9Event” then i am adding custom error to existing json form ajv errors. Here i have example example
When i select a value

const AddCustomErrors = (newValue: any) => {
const currentErrors: any = core?.errors;
if (dispatch != undefined) {
if (newValue === “I9Event”) {
dispatch(Actions.updateErrors([…currentErrors, …additionalErrors]));
}
}
};

Could you please let me know how to update/add errors from custom renderer.

Thanks in advance
Vivek

2

Hi @vivek, the use case is sadly not that well supported at the moment. The approach you describe should work in general, however your errors will be removed again immediately with any data update within JSON Forms.

We have an open issue for this. It could also be solved with middleware support.

To work around this I see three options:

  • Wrap AJV which is handed over to JSON Forms. You can then hand back modified validators to JSON Forms and add your own errors whenever they are invoked.
  • Copy the existing JSONFormsStateProvider and add your own middleware support (which can be a simplified errors-only version of course). Use the modified JSONFormsStateProvider instead of the JsonForms component then.
  • Listen to all data changes in JSON Forms and invoke updateErrors with every data change to re-add your errors.

All of these solutions have some downsides.

We have this issue on our agenda at some point, however first we’ll finish the 3.0 release.

3

Hi Vivek, Are you able to resolve the said problem. I am having the same issue where I want to add custom renderer validation for text input but I am kinda lost. Could you please help?

4

Hi @pankaj-z,

The situation has improved in the mean time. JSON Forms now accepts additionalErrors as a prop. These errors will be mixed in with the AJV errors and handled exactly in the same way.

So to add a custom validation to your form you only need to hand over the additional errors via this prop. See here for the documentation.

5

Hi @sdirix Thanks for quick reply. Currently we are using jsonforms 2.5.1 with custom renderers. I am able to update error message in one of the custom renderer but once data is changed custom error message is lost.

const additionalErrors: ErrorObject[] = [
  {
    propertyName: 'event',
    message: 'is a required property',
    keyword: 'required',
    dataPath: '',
    data: {},
    schemaPath: '',
    params: { missingProperty: 'id' }
  }
]

And in custom text input we have following

 const addCustomErrors = (newValue: any) => {
    const currentErrors: any = core?.errors

    if (dispatch != undefined) {
      if (!data || data === '') {
        const addArr = additionalErrors.map((additionalError) => {
          return {
            ...additionalError,
            dataPath: path
          }
        })

        dispatch(Actions.updateErrors([...currentErrors, ...addArr]))
      }
    }
  }```

Above function will be called on blur event of custom text input.

And this is how jsonforms is used in another component

<JsonForms
schema={schema}
uischema={uiSchema}
data={data}
renderers={formRenderers || }
cells={materialCells}
onChange={({ errors, data }) => {
handleFormDataChange(data, errors)
}}
validationMode={validationMode}
/>


Can you provide an example of how to re-feed the errors object to the json form?
6

Hi @pankaj-z,

Yes, the dispatch(Actions.updateErrors()) approach is the wrong one. As you discovered and outlined above by me this does not work as the errors will be lost with each subsequent change.

You need to update to JSON Forms 3.0 and then you can use the new additionalErrors prop as described in the documentation.

7

@sdirix Just to confirm are there any breaking changes if I migrate from 2.5.1 to 3.X.X?

8

See the migration guide for 3.0