form
form copied to clipboard
zod-form-adapter turns all errors into one comma separated string, meta.errors assumes an array
Describe the bug
At the moment the zod-form-adapter's zodValidator validate
and validateAsync
functions turn the errors that zod reports into a comma separated string:
return result.error.issues.map((issue) => issue.message).join(', ')
When we want to display the Error(s) to the User the field.state.meta.errors
field returns an array ValidationError[]
which now only has one entry (the comma separated string.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-form-r8vroz?file=src%2Findex.tsx
Steps to reproduce
- Open the Stackblitz
- The Form is already in the Error state (the Input
#
does not match the min-length nor the regex (letters a-Z) - Observe: both Error messages are separated by a comma and a space => should only be a comma, see FieldInfo-Function
- You can also check the Console (you can filter for the string "errors")
Expected behavior
As a User
I expect field.state.meta.errors
to be an array (type: ValidationError[]
) with a length that matches the number of errors that resulted from the zod schema validation
BUT
I'm seeing an array (type: ValidationError[]
) with the length of 1
no matter how many validation errors occurred.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Not platform related
TanStack Form adapter
react-form
TanStack Form version
0.32.0
TypeScript version
No response
Additional context
No response