You may have multiple types of submission behaviour, for example, going back to another page or staying on the form. You can accomplish this by specifying the onSubmitMeta property. This meta data will be passed to the onSubmit function.
Note: if form.handleSubmit() is called without metadata, it will use the provided default.
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
type FormMeta = {
submitAction: 'continue' | 'backToMenu' | null
}
// Metadata is not required to call form.handleSubmit().
// Specify what values to use as default if no meta is passed
const defaultMeta: FormMeta = {
submitAction: null,
}
const form = useForm({
defaultValues: {
data: '',
},
// Define what meta values to expect on submission
onSubmitMeta: defaultMeta,
onSubmit: async ({ value, meta }) => {
// Do something with the values passed via handleSubmit
console.log(`Selected action - ${meta.submitAction}`, value)
},
})
</script>
<template>
<form @submit.prevent.stop="">
<button
type="submit"
@click="
() => {
// Overwrites the default specified in onSubmitMeta
form.handleSubmit({ submitAction: 'continue' })
}
"
>
Submit and continue
</button>
<button
type="submit"
@click="() => form.handleSubmit({ submitAction: 'backToMenu' })"
>
Submit and back to menu
</button>
</form>
</template>
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
type FormMeta = {
submitAction: 'continue' | 'backToMenu' | null
}
// Metadata is not required to call form.handleSubmit().
// Specify what values to use as default if no meta is passed
const defaultMeta: FormMeta = {
submitAction: null,
}
const form = useForm({
defaultValues: {
data: '',
},
// Define what meta values to expect on submission
onSubmitMeta: defaultMeta,
onSubmit: async ({ value, meta }) => {
// Do something with the values passed via handleSubmit
console.log(`Selected action - ${meta.submitAction}`, value)
},
})
</script>
<template>
<form @submit.prevent.stop="">
<button
type="submit"
@click="
() => {
// Overwrites the default specified in onSubmitMeta
form.handleSubmit({ submitAction: 'continue' })
}
"
>
Submit and continue
</button>
<button
type="submit"
@click="() => form.handleSubmit({ submitAction: 'backToMenu' })"
>
Submit and back to menu
</button>
</form>
</template>
While Tanstack Form provides Standard Schema support for validation, it does not preserve the Schema's output data.
The value passed to the onSubmit function will always be the input data. To receive the output data of a Standard Schema, parse it in the onSubmit function:
<script setup lang="ts">
import { z } from 'zod'
import { useForm } from '@tanstack/vue-form'
const schema = z.object({
age: z.string().transform((age) => Number(age)),
})
// Tanstack form uses the input type of Standard Schemas
const defaultValues: z.input<typeof schema> = {
age: '13',
}
const form = useForm({
defaultValues,
validators: {
onChange: schema,
},
onSubmit: ({ value }) => {
const inputAge: string = value.age
// Pass it through the schema to get the transformed value
const result = schema.parse(value)
const outputAge: number = result.age
},
})
</script>
<template>
<!-- ... -->
</template>
<script setup lang="ts">
import { z } from 'zod'
import { useForm } from '@tanstack/vue-form'
const schema = z.object({
age: z.string().transform((age) => Number(age)),
})
// Tanstack form uses the input type of Standard Schemas
const defaultValues: z.input<typeof schema> = {
age: '13',
}
const form = useForm({
defaultValues,
validators: {
onChange: schema,
},
onSubmit: ({ value }) => {
const inputAge: string = value.age
// Pass it through the schema to get the transformed value
const result = schema.parse(value)
const outputAge: number = result.age
},
})
</script>
<template>
<!-- ... -->
</template>
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.