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
• LGTM 🚀

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 27cffc8.

Command	Status	Duration	Result
nx run-many --target=build --exclude=examples/**	✅ Succeeded	30s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-06 07:39:54 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-zod
• @tanstack/form-example-angular-yup
• @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-tanstack-start
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-yup
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-ui-libraries
• @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/solid-form

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

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-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: 27cffc8

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