Zod field errors not populating for individual fields on form level validation

[jljorgenson18]

Describe the bug

Per this thread https://discord.com/channels/719702312431386674/1261379829408858223

For zod validators on the entire form, there is currently no way to map individual field errors in the zod schema to field errors in the form state.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/kind-glitter-zn8562?file=%2Fsrc%2FApp.tsx%3A14%2C23-14%2C35&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyomy34i00063b6jqs4wnt6g%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyomy34h00023b6jtc5ffofc%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyomy34h00033b6jy9c7rm9h%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyomy34h00053b6jnpfctita%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyomy34h00023b6jtc5ffofc%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyomy34h00013b6jya45tsoy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clyon18ef00023b6jyyiw63kk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A14%252C%2522startColumn%2522%253A23%252C%2522endLineNumber%2522%253A14%252C%2522endColumn%2522%253A35%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clyomy34h00023b6jtc5ffofc%2522%252C%2522activeTabId%2522%253A%2522clyon18ef00023b6jyyiw63kk%2522%257D%252C%2522clyomy34h00053b6jnpfctita%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyomy34h00043b6jhrxsi1lm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clyomy34h00053b6jnpfctita%2522%252C%2522activeTabId%2522%253A%2522clyomy34h00043b6jhrxsi1lm%2522%257D%252C%2522clyomy34h00033b6jy9c7rm9h%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clyomy34h00033b6jy9c7rm9h%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

1. Have the following form

const form = useForm<z.infer<typeof schema>, ReturnType<typeof zodValidator>>({
    validatorAdapter: zodValidator(),
    validators: { onChange: schema },
    async onSubmit({ value }) {
        console.log('Submitted!');
    }
  });

With this zod schema

 const schema = z.object({
  email: z.string().email({ message: 'Must be a valid email' }),
  password: z.string().min(1, 'Required')
});

2. Fill out email, but no password
3. Submit the form

Expected behavior

Expected behavior would be an error in the error map that would map back to the password field itself and/or an error on the field meta error state so that we can display the actual error message. See screenshot for the actual state.

How often does this bug happen?

None

Screenshots or Videos

Platform

MacOS, Brave

TanStack Form adapter

react-form

TanStack Form version

0.25.1

TypeScript version

No response

Additional context

No response

[rishitells]

I faced this issue as well. I thought if I use validators on form level - I would get an object containing the errors per field, but instead I get a plain error string.

[Balastrong]

As of today, validation can be defined at field or form level as mentioned in the docs so each field needs its validator.

However, we're planning to expand the feature with #656 soon :)

[jljorgenson18]

@Balastrong That PR is to enable the feature as a whole but we would still need a zod specific validation update to actually use the new feature. I had actually planned on trying to make a PR for just that (as discussed in discord here https://discord.com/channels/719702312431386674/1261379829408858223/1262812256706625566) but have not had the time. Should we track the zod updates on a separate ticket?

[Balastrong]

Yeah I was doing some cleanup and wondered why I didn't close this... and you're right, we should keep this open to track the zod adapter. Sorry for the confusion!

[jljorgenson18]

@Balastrong No problem! Honestly this issue could be read multiple ways. I could wait for the other PR to merge and then try to make the zod updates unless someone else gets to it first.

[jljorgenson18]

@Balastrong I have some downtime if you guys want me to take a stab at doing the adapter work. However, it seems like we will need to wait on https://github.com/TanStack/form/pull/656 to be merged first but tackling further adapters.

[Balastrong]

Yeah let's wait for that PR first, but we should be almost there! It's just a matter of days then you can start drafting a PR for that :D

Thank you for your interest, it's much appreciated 🚀

[crutchcorn]

This is now fixed!

[jljorgenson18]

Excellent!