使用antd的form表单组件实现动态表单，数据层次导致校验问题踩坑！！！！

<a-form :model="weeklyState.formModel" ref="formRef">
  <div class="my-page">
    <div class="form-top">
      <a-row>
        <a-col :span="12">
          <a-form-item label="区域名称" :rules="[{ required: true, message: '请选择区域名称！', trigger: 'blur' }]"
            name="regionName">
            <a-select v-model:value="weeklyState.formModel.regionName" placeholder="请选择区域名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="时间范围" :rules="[{ required: true, message: '请选择时间范围！', trigger: 'blur' }]" name="time">
            <a-date-picker style="width: 200px" v-model:value="weeklyState.formModel.time" picker="week"
              :format="weekFormat" @change="handleWeekChange" />
          </a-form-item>
        </a-col>
      </a-row>
    </div>

    <div class="module-item" v-for="(item, index) in weeklyState.formModel.weekWorkSummaryDetailList" :key="index">
      <div class="form-content">
        <a-form-item label="模块标题" :rules="[{ required: true, message: '请输入模块标题！', trigger: 'blur' }]"
          :name="['weekWorkSummaryDetailList',index, 'title']">
          <a-col :span="24">
            <a-input v-model:value="weeklyState.formModel.weekWorkSummaryDetailList[index].title"
              placeholder="请输入模块标题" />
          </a-col>
        </a-form-item>
        <a-form-item label="模块内容" :name="['weekWorkSummaryDetailList',index, 'content']"
          :rules="[{ required: true, message: '请输入模块内容！', trigger: 'blur' }]">
          <a-col :span="24">
            <a-textarea :rows="4" placeholder="请输入模块内容" v-model:value="
                              weeklyState.formModel.weekWorkSummaryDetailList[index].content
                          " />
          </a-col>
        </a-form-item>
      </div>
      <a v-if="!currentData.taskId" class="del" @click="handlerDeleteFormItem(index)">删除</a>
    </div>
  </div>
</a-form>

这是一个动态表单，数据结构如下

const weeklyState = reactive({
        formModel: {
            time: '',
            timeFrameList: [],
            regionName: undefined,
            weekWorkSummaryDetailList: []
        }
    })

其中区域名称和时间范围与下面模块标题/模块内容是一对多关系，也就是说一个区域对应多个模块，踩坑示范

<a-form :model="weeklyState.formModel" ref="formRef">
  <div class="my-page">
    <div class="form-top">
      <a-row>
        <a-col :span="12">
          <a-form-item label="区域名称" :rules="[{ required: true, message: '请选择区域名称！', trigger: 'blur' }]"
            name="regionName">
            <a-select v-model:value="weeklyState.formModel.regionName" placeholder="请选择区域名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="时间范围" :rules="[{ required: true, message: '请选择时间范围！', trigger: 'blur' }]" name="time">
            <a-date-picker style="width: 200px" v-model:value="weeklyState.formModel.time" picker="week"
              :format="weekFormat" @change="handleWeekChange" />
          </a-form-item>
        </a-col>
      </a-row>
    </div>

    <div class="module-item" v-for="(item, index) in weeklyState.formModel.weekWorkSummaryDetailList" :key="index">
      <div class="form-content">
        <a-form-item label="模块标题" :rules="[{ required: true, message: '请输入模块标题！', trigger: 'blur' }]"
          :name="[index, 'title']">
          <a-col :span="24">
            <a-input v-model:value="weeklyState.formModel.weekWorkSummaryDetailList[index].title"
              placeholder="请输入模块标题" />
          </a-col>
        </a-form-item>
        **

## 请注意这里的动态name绑定，由于form表单绑定的值:model="weeklyState.formModel"只到formModel这一层，导致触发校验时在formModel找不到name为title和content的字段，导致校验一直出错，但是打印formModel却可以看到数据，

**
        <a-form-item label="模块内容" :name="[,index, 'content']"
          :rules="[{ required: true, message: '请输入模块内容！', trigger: 'blur' }]">
          <a-col :span="24">
            <a-textarea :rows="4" placeholder="请输入模块内容" v-model:value="
                              weeklyState.formModel.weekWorkSummaryDetailList[index].content
                          " />
          </a-col>
        </a-form-item>
      </div>
      <a v-if="!currentData.taskId" class="del" @click="handlerDeleteFormItem(index)">删除</a>
    </div>
  </div>
</a-form>

解决方案只需在数组中再加一个路径，指引组件这个数据的指向

 :name="['weekWorkSummaryDetailList', index, 'content']"
  :name="['weekWorkSummaryDetailList', index, 'title']"

这样修改后，a-form-item 能够正确识别表单项在 formModel 中的路径，从而避免 please transfer a valid name path to form item! 这个错误。即可以解决，可以正常通过校验