TanStack
Official docs example for form level schema validation is giving an error when used with Zod
Describe the bug
The official docs example of how to show form level validation errors using formErrorMap.onChange is resulting in Type errors. This is the docs example: https://tanstack.com/form/v1/docs/framework/react/guides/validation#validation-at-field-level-vs-at-form-level
And this is a fork of the "Standard Schema" example: https://codesandbox.io/p/devbox/wonderful-bush-v77n2x
Line 47 error:
Type 'Record<string, StandardSchemaV1Issue[]>' is not assignable to type 'ReactNode'.
Type 'Record<string, StandardSchemaV1Issue[]>' is missing the following properties from type 'ReactPortal': children, type, props, key
How can form level validation messages be displayed?
Your minimal, reproducible example
https://codesandbox.io/p/devbox/wonderful-bush-v77n2x
Steps to reproduce
See description above.
Expected behavior
Form level validation errors should be able to be iterated and displayed in JSX.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Chrome
TanStack Form adapter
None
TanStack Form version
@tanstack/react-form v1.12.2
TypeScript version
No response
Additional context
No response
Good catch! Since it's a record, it will need to be iterated.
<em>There was an error on the form: {Object.values(formErrorMap.onChange).flat().map(v => v.message).join(', ')}</em>
