关于如何表单多层for循环校验问题

前言: 使用and-design-vue时，需要校验表单多个for循环中的某个字段。

重点：a-form-item组件的name属性的路径需要设置正确，否则校验失败。

codesandbox地址：表单多层for循环校验-CodeSandbox

UI库官网地址：表单 Form - Ant Design Vue (antdv.com)

属性说明

Form.Item

参数	说明	类型	默认值
name	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string, number, string[], number[]	-

示例代码

直接上代码，可以直接参考。

<template>
  <a-form
    ref="formRef"
    name="dynamic_form_item"
    :model="dynamicValidateForm"
  >
    <div v-for="(people, index) in dynamicValidateForm.peoples" :key="index" class="mb-4">
      <a-form-item
        :label="`父亲的名称（${ index+1 }）`"
        :name="['peoples', index, 'name']"
        :rules="{
          required: true,
          message: '父亲的名字不能为空',
          trigger: 'change',
        }"
      >
        <a-input
          v-model:value="people.name"
          placeholder="请输入父亲的名字"
        />
      </a-form-item>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>儿子的名称</td>
            <td>年纪</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in people.children" :key="i">
            <td>{{ i + 1 }}</td>
            <td>
              <a-form-item
                :name="['peoples', index, 'children', i, 'name']"
                :rules="{
                  required: true,
                  message: '儿子的名字不能为空',
                  trigger: 'change',
                }"
              >
                <a-input
                  v-model:value="item.name"
                  placeholder="请输入儿子的名字"
                />
              </a-form-item>
            </td>
            <td>
              <a-form-item
                :name="['peoples', index, 'children', i, 'age']"
                :rules="{
                  required: true,
                  message: '儿子的年纪不能为空',
                  trigger: 'change',
                }"
              >
                <a-input-number
                  v-model:value="item.age"
                  placeholder="请输入儿子的年纪"
                  class="w-full"
                />
              </a-form-item>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance } from 'ant-design-vue';
interface Children {
  name: string;
  age: number;
}
interface People extends Children {
  children: Children[]
}
interface Model {
  peoples: People[]
}

。
const formRef = ref<FormInstance>();
const dynamicValidateForm = reactive<{ model: Model }>({
  peoples: [
    {
    name: '',
    age: null,
    children: [
      {
        name: '',
        age: null
      },
      {
        name: '',
        age: null
      },
    ]
  },
  {
    name: '',
    age: null,
    children: [
      {
        name: '',
        age: null
      },
      {
        name: '',
        age: null
      },
    ]
  }
  ],
});

dynamicValidateForm.peoples = [
  {
    name: '父亲-张三',
    age: 40,
    children: [
      {
        name: '儿子-李四',
        age: 12
      },
      {
        name: '',
        age: null
      },
    ]
  },
  {
    name: '',
    age: 40,
    children: [
      {
        name: '',
        age: null
      },
      {
        name: '',
        age: null
      },
    ]
  }
]
</script>

<style scope>
table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid black;
}

td {
  min-width: 200px;
  padding: 4px;
  text-align: center;
}

.mb-4 {
  margin-bottom: 8px;
}

.w-full {
  width: 100%;
}
</style>

效果图：