Einreichungshandling
Übergabe zusätzlicher Daten an das Einreichungshandling
Sie können mehrere Arten von Einreichungsverhalten haben, z. B. das Zurückkehren zu einer anderen Seite oder das Verbleiben im Formular. Dies erreichen Sie, indem Sie die Eigenschaft onSubmitMeta angeben. Diese Metadaten werden an die Funktion onSubmit übergeben.
Hinweis: Wenn form.handleSubmit() ohne Metadaten aufgerufen wird, wird die angegebene Standardeinstellung verwendet.
<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>
Daten mit Standard-Schemas transformieren
Während Tanstack Form Standard-Schema-Unterstützung für die Validierung bietet, behält es die Ausgabedaten des Schemas nicht bei.
Der Wert, der an die Funktion onSubmit übergeben wird, sind immer die Eingabedaten. Um die Ausgabedaten eines Standard-Schemas zu erhalten, parsen Sie diese in der Funktion onSubmit.
<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>
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.