最近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有些属性注释不全,可能会碰到一些难缠的,所以这里记录一下

Logo

前往低代码交流专区

更多推荐