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

[Pascalmh]

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]

I think there is a bug in the definition of the ValidationError type

It is currently defined as:

export type ValidationError = undefined | false | null | string

Searching through the codebase there are places where ValidationError | undefined is specified:

const validatesPromises: Promise<ValidationError | undefined>[] = []
const linkedPromises: Promise<ValidationError | undefined>[] = []

This doesn't make sense as ValidationError already includes undefined in the union type.

Then there's this:

/**
   * An array of errors related to the field value.
   */
errors: ValidationError[]

where errors is an array of ValidationError - where the items of the array could be of type undefined | false | null | string so working with the errors requires an additional falsy check.

How to fix it?

My guess is that the ValidationError should be Array<string> | undefined | false | null

Related Issues

• This discussion seams related as well: Returning multiple errors from single validator #946