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 No Sign up' }
  },
})

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 No Sign up"
}

Now however, the onServer map is slightly different:

{
  onServer: { age: "You need to be 12 years or older to No Sign up" }
}

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 aecdb83.

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

---

☁️ Nx Cloud last updated this comment at 2025-04-20 19:07:20 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @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-standard-schema
• @tanstack/form-example-react-simple
• @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: aecdb83

[codecov]

Codecov Report

Attention: Patch coverage is 33.33333% with 10 lines in your changes missing coverage. Please review.

Project coverage is 87.76%. Comparing base (1399731) to head (aecdb83).
Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/react-form/src/nextjs/createServerValidate.ts	0.00%	6 Missing and 2 partials ⚠️
packages/form-core/src/FormApi.ts	71.42%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1432      +/-   ##
==========================================
- Coverage   88.70%   87.76%   -0.95%     
==========================================
  Files          31       31              
  Lines        1364     1398      +34     
  Branches      346      357      +11     
==========================================
+ Hits         1210     1227      +17     
- Misses        137      150      +13     
- Partials       17       21       +4     

☔ 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.