feat(core): onSubmit meta

[harry-whorlow]

new branch after from #1131

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 650144d.

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

---

☁️ Nx Cloud last updated this comment at 2025-02-24 07:37:06 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@1167

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/solid-form

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

@tanstack/vue-form

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

commit: 650144d

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.33%. Comparing base (b0dc32c) to head (650144d).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1167   +/-   ##
=======================================
  Coverage   88.32%   88.33%           
=======================================
  Files          27       27           
  Lines        1199     1200    +1     
  Branches      315      316    +1     
=======================================
+ Hits         1059     1060    +1     
  Misses        125      125           
  Partials       15       15           

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

[crutchcorn]

Great work!!

Just checking, do we want to make these changes? WDYT?