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 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
there are no surprises here. Handing over an i18n object means to set the i18n prop. It is an object and can contain a translate function of the type mentioned above.
In case you are using ajv-errors like in the original question then using errorMessage.required within JSON Schema should be fine. Create a new AJV instance outside of JSON Forms using our exported createAjv function and apply ajv-errors to it. Then hand over the instance via the ajv prop to JSON Forms. Note that we switched from AJV v6 to v8 in one of the 3.0.0 pre releases, so depending on the version of JSON Forms you’re using you need the respective ajv-errors version.
When you want to use our internationalization support for overwriting error messages then you can just check with which keys and default messages the translation function is called and then return your own text.
For required it should be called with the key starting with must have required property {propertyname} (as this is the original AJV error message), <datapath>.error.required (e.g. name.error.required) and error.required. Return your custom message for any of them and it will be used.
I would recommend using the following translation function:
Type '(id: string, defaultMessage: string) => string' is not assignable to type 'Translator'.
Types of parameters 'defaultMessage' and 'defaultMessage' are incompatible.
Type 'undefined' is not assignable to type 'string'. TS2322
Returning defaultMessage here leads to JsonForms complaining about the type returned. I solve it by returning defaultMessage as string, but I am not sure this is the right approch.
Seems we should improve our Translator type a bit. We only specified an overloaded defaultMessage: string and defaultMessage: undefined. My guess is that we should also offer a defaultMessage: string | undefined to express that returning string | undefined is fine there.
For now I would suggest just casting your translate function to the type Translator. Note that I would not recommend using the name translateErrors as we also offer a translateError. This might lead to confusion. I would just name it translate.
I solve it by returning defaultMessage as string, but I am not sure this is the right approch.
Also works. Just make sure to only type cast and not really always returning a string.