feat: spread valibot errors into fields, nested and arrays

packages/valibot-form-adapter/src/validator.ts

@@ -1,63 +1,91 @@
 import { getDotPath, safeParse, safeParseAsync } from 'valibot'
 import { setBy } from '@tanstack/form-core'
-import type { Validator, ValidatorAdapterParams } from '@tanstack/form-core'
+import type {
+  ValidationError,
+  Validator,
+  ValidatorAdapterParams,
+} from '@tanstack/form-core'
 import type {
   BaseIssue,
   GenericIssue,
   GenericSchema,
   GenericSchemaAsync,
+  ValiError,
 } from 'valibot'
 
 type Params = ValidatorAdapterParams<GenericIssue>
+type TransformFn = NonNullable<Params['transformErrors']>
 
-export function prefixSchemaToErrors(errors: Array<BaseIssue<unknown>>) {
-  let schema = {} as object
-  for (const valibotError of errors) {
-    schema = setBy(schema, getDotPath(valibotError), () => valibotError.message)
-  }
-  return schema
-}
+export function prefixSchemaToErrors(
+  valiErrors: GenericIssue[],
+  transformErrors: TransformFn,
+) {
+  const schema = new Map<string, GenericIssue[]>()
+
+  for (const valiError of valiErrors) {
+    if (!valiError.path) continue
 
-export function defaultFormTransformer(errors: Array<BaseIssue<unknown>>) {
-  return {
-    form: mapIssuesToSingleString(errors),
-    fields: prefixSchemaToErrors(errors),
+    const path = valiError.path
+      .map(({ key: segment }) =>
+        typeof segment === 'number' ? `[${segment}]` : segment,
+      )
+      .join('.')
+      .replace(/\.\[/g, '[')
+    schema.set(path, (schema.get(path) ?? []).concat(valiError))
   }
+
+  const transformedSchema = {} as Record<string, ValidationError>
+
+  schema.forEach((value, key) => {
+    transformedSchema[key] = transformErrors(value)
+  })
+
+  return transformedSchema
 }
 
-export const mapIssuesToSingleString = (errors: Array<BaseIssue<unknown>>) =>
-  errors.map((error) => error.message).join(', ')
+export function defaultFormTransformer(transformErrors: TransformFn) {
+  return (zodErrors: GenericIssue[]) => ({
+    form: transformErrors(zodErrors),
+    fields: prefixSchemaToErrors(zodErrors, transformErrors),
+  })
+}
 
 export const valibotValidator =
   (
     params: Params = {},
   ): Validator<unknown, GenericSchema | GenericSchemaAsync> =>
   () => {
+    const transformFieldErrors =
+      params.transformErrors ??
+      ((issues: GenericIssue[]) =>
+        issues.map((issue) => issue.message).join(', '))
+
+    const getTransformStrategy = (validationSource: 'form' | 'field') =>
+      validationSource === 'form'
+        ? defaultFormTransformer(transformFieldErrors)
+        : transformFieldErrors
+
     return {
       validate({ value, validationSource }, fn) {
         if (fn.async) return
         const result = safeParse(fn, value, {
           abortPipeEarly: false,
         })
         if (result.success) return
-        const transformErrors = params.transformErrors
-          ? params.transformErrors
-          : validationSource === 'form'
-            ? defaultFormTransformer
-            : mapIssuesToSingleString
-        return transformErrors(result.issues)
+
+        const transformer = getTransformStrategy(validationSource)
+
+        return transformer(result.issues)
       },
       async validateAsync({ value, validationSource }, fn) {
         const result = await safeParseAsync(fn, value, {
           abortPipeEarly: false,
         })
         if (result.success) return
-        const transformErrors = params.transformErrors
-          ? params.transformErrors
-          : validationSource === 'form'
-            ? defaultFormTransformer
-            : mapIssuesToSingleString
-        return transformErrors(result.issues)
+
+        const transformer = getTransformStrategy(validationSource)
+
+        return transformer(result.issues)
       },
     }
   }

packages/valibot-form-adapter/tests/FormApi.spec.ts

@@ -58,4 +58,143 @@ describe('valibot form api', () => {
     field.setValue('asdf')
     expect(field.getMeta().errors).toEqual([])
   })
+
+  it("should set field errors with the form validator's onChange", () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: '',
+        surname: '',
+      },
+      validatorAdapter: valibotValidator(),
+      validators: {
+        onChange: v.object({
+          name: v.pipe(
+            v.string(),
+            v.minLength(3, 'You must have a length of at least 3'),
+            v.endsWith('a', 'You must end with an "a"'),
+          ),
+          surname: v.pipe(
+            v.string(),
+            v.minLength(3, 'You must have a length of at least 3'),
+          ),
+        }),
+      },
+    })
+
+    const nameField = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    const surnameField = new FieldApi({
+      form,
+      name: 'surname',
+    })
+
+    nameField.mount()
+    surnameField.mount()
+
+    expect(nameField.getMeta().errors).toEqual([])
+    nameField.setValue('q')
+    expect(nameField.getMeta().errors).toEqual([
+      'You must have a length of at least 3, You must end with an "a"',
+    ])
+    expect(surnameField.getMeta().errors).toEqual([
+      'You must have a length of at least 3',
+    ])
+    nameField.setValue('qwer')
+    expect(nameField.getMeta().errors).toEqual(['You must end with an "a"'])
+    nameField.setValue('qwera')
+    expect(nameField.getMeta().errors).toEqual([])
+  })
+
+  it("should set field errors with the form validator's onChange and transform them", () => {
+    const form = new FormApi({
+      defaultValues: {
+        name: '',
+        foo: {
+          bar: '',
+        },
+      },
+      validatorAdapter: valibotValidator({
+        transformErrors: (errors: any[]) => errors[0]?.message,
+      }),
+      validators: {
+        onChange: v.object({
+          name: v.pipe(
+            v.string(),
+            v.minLength(3, 'You must have a length of at least 3'),
+            v.endsWith('a', 'You must end with an "a"'),
+          ),
+          foo: v.object({
+            bar: v.pipe(
+              v.string(),
+              v.minLength(4, 'You must have a length of at least 4'),
+            ),
+          }),
+        }),
+      },
+    })
+
+    const nameField = new FieldApi({
+      form,
+      name: 'name',
+    })
+
+    const fooBarField = new FieldApi({
+      form,
+      name: 'foo.bar',
+    })
+
+    nameField.mount()
+    fooBarField.mount()
+
+    expect(nameField.getMeta().errors).toEqual([])
+    nameField.setValue('q')
+    expect(nameField.getMeta().errors).toEqual([
+      'You must have a length of at least 3',
+    ])
+    expect(fooBarField.getMeta().errors).toEqual([
+      'You must have a length of at least 4',
+    ])
+    nameField.setValue('qwer')
+    expect(nameField.getMeta().errors).toEqual(['You must end with an "a"'])
+    nameField.setValue('qwera')
+    expect(nameField.getMeta().errors).toEqual([])
+  })
+
+  it('should set field errors with the form validator for arrays', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: [''],
+      },
+      validatorAdapter: valibotValidator(),
+      validators: {
+        onChange: v.object({
+          names: v.array(
+            v.pipe(
+              v.string(),
+              v.minLength(3, 'You must have a length of at least 3'),
+            ),
+          ),
+        }),
+      },
+    })
+
+    const name0Field = new FieldApi({
+      form,
+      name: 'names[0]',
+    })
+
+    name0Field.mount()
+
+    expect(name0Field.getMeta().errors).toEqual([])
+    name0Field.setValue('q')
+
+    expect(name0Field.getMeta().errors).toEqual([
+      'You must have a length of at least 3',
+    ])
+    name0Field.setValue('qwer')
+    expect(name0Field.getMeta().errors).toEqual([])
+  })
 })