Repository navigation
FieldAPI: state.meta.errors are not updating properly when using server-validations for errors #1260
Description
Describe the bug
Basically, the field.state.meta.errors (field as AnyFieldApi) is not properly set (i.e. differs from form.store.state.errors) when using transformation to properly handle server-side validations, I have a very detailed example below showing expected code (form.tsx accessible via /form) vs. the code I had to hack for this to work (home.tsx accessible as homepage)
The difference is basically manually parsing errors via this hack, then passing them to show:
useEffect(() => {
if (actionData) {
const formErrors = form.store.state.errors;
const realErrors = formErrors.map((error) =>
error as unknown as {
[K in keyof z.infer<typeof ZodSchemaServer>]: z.ZodIssue[]
}
);
console.log("real-errors", JSON.stringify(realErrors));
setAllErrors(() => {
return realErrors.reduce((result, errorObj) => {
Object.keys(errorObj).map(key => {
const K = key as keyof z.infer<typeof ZodSchemaServer>;
if (!result[K]) result[K] = [];
if (errorObj[K]) {
result[K].push(...errorObj[K]);
}
});
return result;
}, {} as {[K in keyof z.infer<typeof ZodSchemaServer>]: z.ZodIssue[]});
});
}
}, [actionData]);
Reproduction: here
Your minimal, reproducible example
https://codesandbox.io/p/devbox/fast-forest-fjwkyw
Steps to reproduce
- Go to link
- Run it
- See code difference between
home.tsxandform.tsx
Expected behavior
As a user, I expect server-side-validation to not require me to manually set the errors, as a side-note, I first tried using setFieldMeta manually too, which also did nothing
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
Any
TanStack Form adapter
None
TanStack Form version
latest
TypeScript version
latest
Additional context
No response
Reacted by Kenneth Van den Berghe, 蛋疼的蛋蛋, Damian Balas, Harry Gulliford, Matt Lynch, devBaunz, Duong Cong Vu, Ivan Sova, James Greenaway, Sam Ratcliffe and 7 more
Reacted by James Greenaway, Sam Ratcliffe and humemm
Activity
theVedanta commentedon Mar 11, 2025
Currently, there is only support for accessing the
formStateto get theformErrorsand render them separately, one at a time.There has been some discussion on discord about adding support for server-related errors in the fields as well, so we should see it soon!
I loved the approach you took here by manually parsing and referenced it to someone else who was also trying to accomplish the same.
jvgomg commentedon May 13, 2025
Thank you @devBaunz for creating an issue and sharing your solution.
I was was also anticipating that the
field.state.meta.errorswould update with the server errors. I think that is a good portion of the utility in why you would want to use TanStack Form with a server validation.I have been working through the Next.js Actions integration docs - I didn't realise the behaviour of the example code was not working as I anticipated until I ran the 'Next Server Actions example' and observed the server error was rendering above the input.
I would really like TanStack form to have the ability to render the server errors against the Fields. It would help offer a good "isomorphic UX". Perhaps it is an opt-in thing as part of the
useTransformbit of code 🤔antlanc7 commentedon Jun 16, 2025
Any update on this? Right now server errors are almost unusable.
crutchcorn commentedon Jan 30, 2026
Can you retest with:
I believe we have a fix for many (if not all) Form SSR behaviors
crutchcorn commentedon Feb 13, 2026
Should be fixed in 1.28.1