feat (form-core): Merging Form-level server errors with Field-level errors

[theVedanta]

Instead of the previous serverValidate function just returning a string, we now return an object:

const serverValidate = createServerValidate({
  ...formOpts,
  onServerValidate: ({ value }) => {
    if (value.age < 12)
      return { age: 'Server validation: You must be at least 12 to #' }
  },
})

This then maps to the field-level errors with the setMeta options.

The only reason this is called a preliminary approach is because we are setting the onServer key of the errorMap differently.

Previously, the error map for the form looked like so:

{
  onServer: "You need to be 12 years or older to #"
}

Now however, the onServer map is slightly different:

{
  onServer: { age: "You need to be 12 years or older to #" }
}

This causes some degree of inconsistency, which is why I would love some feedback on whether we can use some other property (or maybe create our own!) to manage the errors between fields and forms. This would not be a comprehensive property but just a map to sync them back and forth.

NextJS support has been pushed. Remix and Start coming soon.
Support for Array field types will also be done shortly.

Would love your feedback and comments on this approach before I proceed!

Solves the following issue: #1260

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9413ca6.

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

---

☁️ Nx Cloud last updated this comment at 2025-06-30 11:40:28 UTC

[pkg-pr-new]

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

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/solid-form

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

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1432

@tanstack/vue-form

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

commit: 9413ca6

[codecov]

Codecov Report

❌ Patch coverage is 6.89655% with 27 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.85%. Comparing base (4abbc8a) to head (9413ca6).
⚠️ Report is 54 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/react-form/src/nextjs/createServerValidate.ts	0.00%	13 Missing and 3 partials ⚠️
packages/form-core/src/FormApi.ts	15.38%	8 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1432      +/-   ##
==========================================
- Coverage   89.24%   87.85%   -1.40%     
==========================================
  Files          31       31              
  Lines        1432     1457      +25     
  Branches      366      376      +10     
==========================================
+ Hits         1278     1280       +2     
- Misses        137      155      +18     
- Partials       17       22       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.