feat(core) onSubmit meta

[harry-whorlow]

From issue #989, this PR introduces onSubmitMeta to the formApi.

Example API shamelessly ripped from #989 and @crutchcorn

const form = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
    // Is 'never' by default unless you provide a type
    // {} is the default value passed to `onSubmit`'s `meta` property
    onSubmitMeta: {} as { someValue: string },
    onSubmit: async ({ value, meta }) => {
      // Do something with form data
      console.log(value)
      // Do something with the values passed via handleSubmit
      console.log(meta)
    },
  })

  return (
    <div>
      <h1>Simple Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          form.handleSubmit({
            someValue: 'value',
          })
        }}
      >

---

---

• working overloads
• Tests

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ffd8138.

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

---

☁️ Nx Cloud last updated this comment at 2025-02-17 22:33:17 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-valibot
• @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-yup
• @tanstack/form-example-react-zod
• @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@1131

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/solid-form

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

@tanstack/valibot-form-adapter

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

@tanstack/vue-form

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

@tanstack/yup-form-adapter

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

@tanstack/zod-form-adapter

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

commit: ffd8138

[harry-whorlow]

I'm going to give it a go as the generic not extending object, I'm a little unsure why I started with it like this. But, I think restricting the user to what type they can define is a miss-step.

[codecov]

Codecov Report

Attention: Patch coverage is 96.29630% with 1 line in your changes missing coverage. Please review.

Project coverage is 87.88%. Comparing base (990a916) to head (ffd8138).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/react-form/src/useTransform.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1131      +/-   ##
==========================================
+ Coverage   87.86%   87.88%   +0.02%     
==========================================
  Files          30       30              
  Lines        1318     1321       +3     
  Branches      354      353       -1     
==========================================
+ Hits         1158     1161       +3     
  Misses        144      144              
  Partials       16       16              

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