Server-Side validation only works once if returning errors object with an unexisting field

[newfylox]

I know in documentation it says that the errors object must match the fields of the form, but it was to tell that if not, the errors won't show in the form.

Indeed, in V3, providing an errors object with dynamic fields (fields that doesn't exist in the form but come from the API for example) would only show errors for exact field names and the form would work each time we hit the "save" button.

But in V4, it will only work once (when clicking "save" button) but after it kind of crashes and we can't click on save button anymore.

• visit that page https://codesandbox.io/s/epic-browser-bjzcqv?file=/src/comments/CommentCreate.tsx
• click on "Comments" section
• click on "+" button to create a comment
• Change the created_at value so that you can click on "save"
• click on "save" button once to see that the first errors object works and show the error on "author" field
• click on "save" button again to see that it doesn't work anymore

[slax57]

Reproduced, thanks!

[bbelletoile]

Hello, I have exactly the same problem with admin v4. Did you find a temporary solution?

[newfylox]

Until the bug is fixed, I have 2 solutions

• fix your server API endpoint to return exactly what the frontend needs for fields (not always easy)
• on the frontend side, before returning the error object, filter the object by removing/adding keys so it only contains keys that fit the submitted form (that's what I did. For example my server returned { first_name: "First", last_name: "Last", other_key: "value" } as object and before returning that object, I removed keys that didn't fit with the form like this { first_name: "First", last_name: "Last" })

[newfylox]

It seems that it's related to react-hook-form and not react-admin. But I remember that in one of your previous versions, your code was kind of sanitizing useless/unrelated fields.

I started an issue (that turned to discussion) with react-hook-form team and I thought I could share it here and probably asking to close this issue.

https://github.com/react-hook-form/react-hook-form/discussions/9906

But maybe you have a good idea or code example to implement a generic setErrors that uses setError behind the scenes and can ignore unrelated form fields so we can use it.

Thanks

[slax57]

@newfylox Thank you for taking the time to push the analysis further, and for sharing your results so far!

I agree that this seems to be a RHF limitation (for now), and hence I'll close this issue.

Regarding the last part of your answer however, I'm not sure I caught exactly what you are asking for. If that helps, the setError callback is called here, which is called from the submit callback of useAugmentedForm here. If you need to implement some logic to filter the fields on which you will call setError, you can probably provide your own SaveContext, which would wrap the return value (i.e. the errors) of the original save callback, and filter out all the non-registered fields. You may be able to get the registered fields list by calling getValues with no parameter.