Vue表单

记录表单相关

我有一个model想要用reactive 包起来给from用，如何操作

在 Vue 3 中，常见的用法是：

1. 定义一个「原始模型」对象，比如你的数据结构（form model）。
2. 使用 reactive 将该对象包装为响应式对象。
3. 将这个响应式对象传入 Form.useForm() 中，以便使用 Ant Design Vue 的表单验证机制。

下面是一个示例步骤：

<script setup lang="ts">
import { reactive } from 'vue'
import { Form } from 'ant-design-vue'

// 定义你的model接口类型（可选）
interface MyFormModel {
  name: string
  age: number | undefined
}

// 创建一个默认模型对象
const defaultModel: MyFormModel = {
  name: '',
  age: undefined
}

// 使用 reactive 创建响应式的 formData
const formData = reactive({ ...defaultModel })

// 定义验证规则
const rules = {
  name: [{ required: true, message: '请输入姓名' }],
  age: [{ required: true, type: 'number', message: '请输入年龄' }]
}

// 使用 Form.useForm()
// 第一个参数是要验证的数据对象，第二个参数是规则对象
const { validate, validateInfos, resetFields, clearValidate } = Form.useForm(
  formData,
  rules
)

// 当需要对 formData 进行操作时，直接读写 formData.name / formData.age 即可
// 当需要校验时，调用 validate()
</script>

<template>
  <a-form :model="formData" :rules="rules">
    <a-form-item label="姓名" :validateStatus="validateInfos.name?.validateStatus" :help="validateInfos.name?.errors?.[0]">
      <a-input v-model:value="formData.name" />
    </a-form-item>
    <a-form-item label="年龄" :validateStatus="validateInfos.age?.validateStatus" :help="validateInfos.age?.errors?.[0]">
      <a-input-number v-model:value="formData.age" />
    </a-form-item>
    <a-button type="primary" @click="validate()">提交</a-button>
    <a-button @click="resetFields()">重置</a-button>
  </a-form>
</template>

说明：

• 将原始数据对象 defaultModel 转化为 reactive 后的 formData，便得到了一个可在模板中直接使用（无需 .value）的响应式对象。
• 使用 Form.useForm(formData, rules) 可以实现表单校验和状态追踪。
• 模板中绑定 :model="formData"，并在各个表单控件上使用 v-model:value 双向绑定，这样控件的值改变会自动更新 formData。
• 验证信息从 validateInfos 中获取，在 <a-form-item> 上通过 :validateStatus、:help 显示对应的错误提示。

这样就能将一个 model 用 reactive 包裹起来并搭配 Ant Design Vue 的 Form 使用。