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

在使用antd时多层嵌套循环表单时校验会报如下错误：please transfer a valid name path to form item
原因：是循环体和字段无法绑定
解决1如下：

  <a-form>
   <div v-for="(item, index) in form.List" :key="index">
       <a-form-item :name="['List',index,'userList',i,'name']" v-for="(ject, i) in item.userList" :key="i" :rules="[{ required: true, message: '必填' }]">
          <a-input v-model:value="ject.name" />
       </a-form-item>
    <div>
  </a-form>

嵌套表单校验可以这么理解：List[index].userList[i].name

 

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

解决方法2：

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

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

再循环中使用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>

 

（注意一下相同颜色部分一定要对应） 或

<div v-for="(users, index) in formData.list" class="form-div">
          <Row :gutter="26">
            <Col :span="5">
              <FormItem
                :name="['List',index,'userList','temqProjectid']"
                :rules="[{ required: true, message: '请选择类别', trigger: 'change' }]"
              >
                <Select
                  v-model:value="users.temqProjectid"
                  :options="showCityList(users.temqProjectid)"
                  :showSearch="true"
                  optionFilterProp="label"
                  style="width: 120px"
                  :dropdownMatchSelectWidth="120"
                  allow-clear
                  placeholder="选择类别"
                />
              </FormItem>
            </Col>
            <Col :span="3">
              <FormItem
                :name="['List',index,'userList','temqSpecial']"
                :rules="{ required: true, message: '输入分配额' }"
              >
                <Input
                  v-model:value="users.temqSpecial"
                  placeholder="输入分配额"
                  allow-clear
                  style="width:70px;"
                />
              </FormItem>
            </Col>

          </Row>
        </div>