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.