form icon indicating copy to clipboard operation
form copied to clipboard

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

Open jljorgenson18 opened this issue 1 year ago • 7 comments

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')
});
  1. Fill out email, but no password
  2. 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

image

Platform

MacOS, Brave

TanStack Form adapter

react-form

TanStack Form version

0.25.1

TypeScript version

No response

Additional context

No response

jljorgenson18 avatar Jul 16 '24 16:07 jljorgenson18