[WIP] [FEAT] Allow returning anything in a validator, not just a string

[crutchcorn]

This PR allows you to return non-string values from validators:

<form.Field name="password" validators={{onChange: () => ({hasUppercase: false, hasLowercase: true}) }} />

In addition, it also enforces type safety on the returned value on both errorMap and the errors array:

const form = new FormApi({
  defaultValues: {
    name: 'test',
  },
} as const)

const field = new FieldApi({
  form,
  name: 'name',
  validators: {
    onChange: () => {
      return 123 as const
    },
  },
})

assertType<123 | undefined>(field.state.meta.errorMap.onChange)

assertType<Array<123 | undefined>>(field.state.meta.errors)

Start Adapter Fixes

Along the way, I wanted to fix the Start adapter, so we're doing so in this PR. Fixes: #1023

Vue typings

This PR also fixes the issues with Vue SFC format and marks Vue 3.4 as the new minimum supported version

TODO

• Fix Start adapter
  • Blocked by: Start: createServerFn cannot return raw response objects router#2779
• Think about how to handle schema validators' return types
• Fix adapters
  • vue-form
  • solid-form
  • react-form
  • lit-form
  • angular-form
• Docs highlights of non-string returns
• Docs mention of error array handling
• Docs update for TanStack Start adapter

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 69c1897.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	1m 32s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	32s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-11 18:03:51 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-yup
• @tanstack/form-example-angular-zod
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-zod
• @tanstack/form-example-react-yup
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-valibot
• @tanstack/form-example-solid-yup
• @tanstack/form-example-solid-zod
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-valibot
• @tanstack/form-example-vue-yup
• @tanstack/form-example-vue-zod

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1104

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1104

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1104

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1104

@tanstack/valibot-form-adapter

npm i https://pkg.pr.new/@tanstack/valibot-form-adapter@1104

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1104

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1104

@tanstack/yup-form-adapter

npm i https://pkg.pr.new/@tanstack/yup-form-adapter@1104

@tanstack/zod-form-adapter

npm i https://pkg.pr.new/@tanstack/zod-form-adapter@1104

commit: 69c1897