form
form copied to clipboard
Zod field errors not populating for individual fields on form level validation
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
- 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')
});
- Fill out email, but no password
- 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