antd Form组件表单在vue3中的使用

antd Form表单组件有个最需要注意的问题，官方文档里写的很清楚：

这是什么意思，我们下面说个例子就明白了：

<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="username" name="username">
      <label>Username:</label>
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">Create</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
    </a-form-item>
  </a-form>
</template>

这里<a-form-item>的标签name属性需要和表单对象formState里面的字段username对应上，包含在标签里面的<a-input>标签的v-model:value绑定formState.username

这里a-form-item里面的name属性是用来给rules验证规则对应使用的

import { defineComponent, reactive, ref, toRaw } from "vue"
export default defineComponent({
  setup() {
    const formState = reactive({
      name: "",
      username: '',
      password: '',
      password2: '',
      code: ''
    })
    const rules = {
      username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
      ]
    }
    
    return {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      formState,
      rules
    }
  }
})

表单数据存在formState里面

验证规则存在rules里面

最后别忘了返回：

效果：
当失去焦点的时候，会提示用户

输入字符长度不在3-5之间的话，也会提示：

但是如果这样写，就不会有错误提示了：

效果：
失去焦点以后，并不会提示：

这就是官方文档里面提到的，<a-form-item>只会监听第一个子元素的变化

如果我们调换一下位置：

又可以提示了：

如果非要把label放在输入框上面，又不想影响提示功能，怎么办？？

<a-form-item>上面套一个div不就完事了：

效果：

当然最方便的就是默认的样式，直接在<a-form-item>标签里面配置label属性就可以了：

效果：