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)框关联起来,导致表单规则校验一直报错解决方法:因为出现这种
最近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有些属性注释不全,可能会碰到一些难缠的,所以这里记录一下
更多推荐
所有评论(0)