[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)

Breaking Changes

• Removes all validatorAdapters (packages, code, and props alike)
  • Instead, you can use our Standard Schema support for Valibot, Zod, and ArkType
  • As a result, however, Yup is no longer supported until this community PR is merged
• When using Standard Schema validators:
  • form.errors is now Record<string, StandardSchemaIssue[]>
  • field.errors is now StandardSchemaIssue[] (flattened)
• Vue 3.4 is the new minimum version
• Vue JSX usage no longer works (fixes SFC usage)
• TanStack Start adapter API changed (fixes Update TanStack Start adapter #1023)

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 standard schema 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
• Docs updates for validations and errors

Future work

• Add standard schema validation for SSR adapters
• Add examples for standard schema for other libraries

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b6de203.

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

---

☁️ Nx Cloud last updated this comment at 2025-02-21 03:23:36 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @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-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@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/lit-form

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

@tanstack/solid-form

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

@tanstack/vue-form

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

commit: b6de203

[Balastrong]

Let's do it! 🚀