提交处理 | TanStack Form Vue Docs

向提交处理传递额外数据

您可能有多种类型的提交行为，例如，返回到另一个页面或停留在表单上。您可以通过指定 onSubmitMeta 属性来实现这一点。此元数据将传递给 onSubmit 函数。

注意：如果调用 form.handleSubmit() 时没有元数据，它将使用提供的默认值。

vue

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

type FormMeta = {
  submitAction: 'continue' | 'backToMenu' | null
}

// 调用 form.handleSubmit() 不需要元数据。
// 指定在没有传递元数据时使用的默认值
const defaultMeta: FormMeta = {
  submitAction: null,
}

const form = useForm({
  defaultValues: {
    data: '',
  },
  // 定义提交时期望的元数据值
  onSubmitMeta: defaultMeta,
  onSubmit: async ({ value, meta }) => {
    // 对通过 handleSubmit 传递的值进行处理
    console.log(`Selected action - ${meta.submitAction}`, value)
  },
})
</script>

<template>
  <form @submit.prevent.stop="">
    <button
      type="submit"
      @click="
        () => {
          // 覆盖在 onSubmitMeta 中指定的默认值
          form.handleSubmit({ submitAction: 'continue' })
        }
      "
    >
      提交并继续
    </button>
    <button
      type="submit"
      @click="() => form.handleSubmit({ submitAction: 'backToMenu' })"
    >
      提交并返回菜单
    </button>
  </form>
</template>

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

type FormMeta = {
  submitAction: 'continue' | 'backToMenu' | null
}

// 调用 form.handleSubmit() 不需要元数据。
// 指定在没有传递元数据时使用的默认值
const defaultMeta: FormMeta = {
  submitAction: null,
}

const form = useForm({
  defaultValues: {
    data: '',
  },
  // 定义提交时期望的元数据值
  onSubmitMeta: defaultMeta,
  onSubmit: async ({ value, meta }) => {
    // 对通过 handleSubmit 传递的值进行处理
    console.log(`Selected action - ${meta.submitAction}`, value)
  },
})
</script>

<template>
  <form @submit.prevent.stop="">
    <button
      type="submit"
      @click="
        () => {
          // 覆盖在 onSubmitMeta 中指定的默认值
          form.handleSubmit({ submitAction: 'continue' })
        }
      "
    >
      提交并继续
    </button>
    <button
      type="submit"
      @click="() => form.handleSubmit({ submitAction: 'backToMenu' })"
    >
      提交并返回菜单
    </button>
  </form>
</template>

使用标准模式转换数据

虽然 Tanstack Form 为验证提供了标准模式支持，但它不会保留模式的输出数据。

传递给 onSubmit 函数的值始终是输入数据。要接收标准模式的输出数据，请在 onSubmit 函数中解析它：

vue

<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 使用标准模式的输入类型
const defaultValues: z.input<typeof schema> = {
  age: '13',
}

const form = useForm({
  defaultValues,
  validators: {
    onChange: schema,
  },
  onSubmit: ({ value }) => {
    const inputAge: string = value.age
    // 通过模式传递以获取转换后的值
    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 使用标准模式的输入类型
const defaultValues: z.input<typeof schema> = {
  age: '13',
}

const form = useForm({
  defaultValues,
  validators: {
    onChange: schema,
  },
  onSubmit: ({ value }) => {
    const inputAge: string = value.age
    // 通过模式传递以获取转换后的值
    const result = schema.parse(value)
    const outputAge: number = result.age
  },
})
</script>
<template>
  <!-- ... -->
</template>