form icon indicating copy to clipboard operation
form copied to clipboard

zod-form-adapter turns all errors into one comma separated string, meta.errors assumes an array

Open Pascalmh opened this issue 5 months ago • 1 comments

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

  1. Open the Stackblitz
  2. The Form is already in the Error state (the Input # does not match the min-length nor the regex (letters a-Z)
  3. Observe: both Error messages are separated by a comma and a space => should only be a comma, see FieldInfo-Function
  4. 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

Pascalmh avatar Sep 06 '24 07:09 Pascalmh