vue3 form 报错: please transfer a valid name path to form item

最近vue3着实很火，但很多伙伴在用的时候发现很多坑，比如说上面这个报错

please transfer a valid name path to form item!

为什么会出现这个问题呢，我是在使用antd的动态增减表单（循环）的时候报了这个错误，搞了很久才找到根本原因。

原因：你的formItem的name属性没有和数据输入（input）框关联起来，导致表单规则校验一直报错

解决方法：

因为出现这种场景很多，所以这里提供几个注意事项，大家可以依次检查一下。

1.检查formItem的name属性名称是否和输入框value值一致

<a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
    <a-input v-model:value="formState.username" />
</a-form-item>

2.再循环中使用form时，name规则如下：（注意一下相同颜色部分一定要对应）,要不然构建的dom树不能对应起来

 <a-form
    ref="formRef"
    :model="dynamicValidateForm"
    @finish="onFinish"
  >
    <a-space
      v-for="(user, index) in dynamicValidateForm.users"
      :key="user.id"
      align="baseline"
    >
      <a-form-item
        :name="['users', index, 'first']"
        :rules="{ required: true,  message: 'Missing first name' }"
      >
        <a-input v-model:value="user.first" placeholder="First Name" />
      </a-form-item>
    </a-space>
  </a-form>

总结： 由于antd-vue有些属性注释不全，可能会碰到一些难缠的，所以这里记录一下