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

❤ vue3使用Ant Design Vue

please transfer a valid name path to form item!

我是在使用antd的动态增减表单（循环）的时候报了这个错误，搞了很久才找到根本原因

原因

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

解决方法

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

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

<a-form-itemlabel="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-formref="formRef":model="dynamicValidateForm"@finish="onFinish"><a-spacev-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>

总结： 这里记录一下Ant Design Vue的使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！