Refine•2y ago

How to change default error message in useForm

The default error message

Error when updating <resource-name> (status code: ${err.statusCode})" or "Error when creating <resource-name> (status code: ${err.statusCode})

Error when updating <resource-name> (status code: ${err.statusCode})" or "Error when creating <resource-name> (status code: ${err.statusCode})

is not terribly helpful to users. I'd like to change it to the message my API responds with. How can I do this on a global level (instead of repeating it each time I use

useForm

useForm

?
https://refine.dev/docs/packages/react-hook-form/use-form/#errornotification

useForm | Refine

useForm is used to manage forms. It returns the necessary properties and methods to control the

 element. It has been developed by using useForm

 element. It has been developed by using useForm

imported from the @refinedev/core package.

kapa.ai•6/12/24, 6:41 AM

Hi @boris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•6/12/24, 6:41 AM

----------------------
To change the default error message in

useForm

useForm

to the message your API responds with, you can customize the

errorNotification

errorNotification

property. However, to apply this change globally, you can leverage the i18n provider to customize the notification messages from translation files.

Here is how you can do it:

**Customize Notification Messages via i18n Provider:**Refine uses specific translation keys for notification titles. You can customize these keys in your translation files to reflect the messages from your API.Example translation file (`en.json`):```json{ "notifications": { "success": "Successful", "error": "Error (status code: {{statusCode}})", "undoable": "You have {{seconds}} seconds to undo", "createSuccess": "Successfully created {{resource}}", "createError": "There was an error creating {{resource}} (status code: {{statusCode}})", "deleteSuccess": "Successfully deleted {{resource}}", "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})", "editSuccess": "Successfully edited {{resource}}", "editError": "Error when editing {{resource}} (status code: {{statusCode}})", "importProgress": "Importing: {{processed}}/{{total}}" }}```You can modify the `createError`, `deleteError`, and `editError` keys to use the message from your API.For example:```json{ "editError": "{{resource}} failed to update: {{errorMessage}}"}```
**Implementing Custom Error Notification in `useForm`:**If you still need to customize the error notification within `useForm`, you can do so by setting the `errorNotification` property. Here is an example:

kapa.ai•6/12/24, 6:41 AM

This approach allows you to customize the error message for each form, but for a global solution, modifying the i18n translation files is more efficient.

For more detailed information, you can refer to the Refine documentation on errorNotification (https://refine.dev/docs/packages/react-hook-form/use-form/#errornotification).

If you need further assistance, please check the guide on errorNotification (https://refine.dev/docs/data/hooks/use-form/#errornotification-).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/12/24, 6:41 AM

@499582506736287744 kapa.ai is still learning and improving, please let us know how it did by reacting below

efficient-indigoOP•6/12/24, 8:59 AM

Customize Notification Messages via i18n Provider would work if I can customize the params passed to i18n. How can I do that?

efficient-indigoOP•6/12/24, 9:23 AM

I ended up making a custom version of the

useForm

useForm

hook