FieldAPI: state.meta.errors are not updating properly when using server-validations for errors

[devBaunz]

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

1. Go to link
2. Run it
3. See code difference between home.tsx and form.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

[theVedanta]

Currently, there is only support for accessing theformState to get the formErrors and render them separately, one at a time.

{formErrors.map(
  (error) =>
    error?.age &&
    error?.age.map((fieldError) => (
      <p key={fieldError.message} className="text-red-700">
        {fieldError?.message}
      </p>
    ))
)}

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]

Thank you @devBaunz for creating an issue and sharing your solution.

I was was also anticipating that the field.state.meta.errors would 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 useTransform bit of code 🤔

[antlanc7]

Any update on this? Right now server errors are almost unusable.