Unclear of how to implement ajv-errors to display customer error messages below the label/input element

Hi all,

Thank you for your help in advance.
I do not seem to get of how to implement ajv-errors into JSON Forms to display custom error messages on the DOM, basically to replace the default “is required property” message.
I have followed the instructions, but it does not overwrite the message, i was able to get custom message printed inside console, but how do i pass it to JSON Forms to overwrite the default?
I am sure it is something simple.

I am using:

"ajv": "^8.6.3",
"ajv-errors": "^3.0.0",    
"@jsonforms/core": "^3.0.0-alpha.2",
"@jsonforms/examples": "^3.0.0-alpha.2",
"@jsonforms/material-renderers": "^3.0.0-alpha.2",
"@jsonforms/react": "^3.0.0-alpha.2",
"@jsonforms/vanilla-renderers": "^3.0.0-alpha.2"

Code below:

const schema = {
  type: 'object',
  errorMessages: {
    type: 'should be an object',
    required: {
      description: 'description field is missing',
    },
  },
  properties: {
    description: {
      title: 'Long Description',
      type: 'string',
      minLength: 3,
      errorMessage: {
        required: 'foo must be an Integer',
      },
    },
  },
  required: ['description'],
  additionalProperties: false,
};

const initialData = {
  description: undefined,
};

const Ajv = require('ajv').default;
const ajv = new Ajv({
  allErrors: true,
  messages: true,
  strict: false,
  timestamp: true,
  ownProperties: true,
  verbose: true,
});

const validate = ajv.compile(schema);
console.log(validate(initialData));
console.log(validate.errors);

const App = () => {
  const [jsonformsData, setJsonformsData] = useState(initialData);

  return (
    <div className='App App-header'>
      <JsonForms
        ajv={ajv}
        schema={schema}
        uischema={uischema}
        data={jsonformsData}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ errors, data }) => {
          setJsonformsData(data);
        }}
      />
    </div>
  );
};

image

Best regards,
KK

Hi @karolis-k,

I don’t really see ajv-errors being used in the provided code. You need to wrap your AJV instance with ajv-errors and then hand over this instance to JSON Forms.

Unrelated note: Ideally you should use the createAjv method exported by @jsonforms/core to make sure you always have the options set which JSON Forms requires (except when you override them again).


Note that with the latest prerelease we now have i18n support in JSON Forms which also allows to customize the error messages. There is no documentation yet but it should be rather straightforward. If you want to use it: You can hand over an i18n object to the root component containing a translate function which is of type

(key: string, defaultMessage: string | undefined, args: any) => string | undefined

This translate function should return the defaultMessage when you don’t have a translation for the given key.