Vue3 TS antd 表单数据为对象数组的时候如何实现动态验证

1. 使用场景

需求表单数据格式为虚拟机对象数组,需要实现表单的验证等功能。

在这里插入图片描述

2. name 属性的路径语法和定义相应的 rules

关键代码如下:

createFormDatas格式为对象数组,关键代码为 :name=“[index, ‘name’]”

  <a-form
      name="basic"
      ref="createFormRef"
      :model="createFormDatas"
      :rules="createFormRules"
    >
      <div v-for="(item, index) in createFormDatas" :key="index">
        <a-form-item
            :name="[index, 'name']"
            label="名称"
            :rules="createFormRules.name"
            class="margin-bottom-01"
          >
            <a-input v-model:value="item.name" placeholder="请输入" show-count :maxlength="255" />
            ...
          </a-form-item>
      </div>
    </a-form>
const createFormRef = ref()
const createFormRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
}
const createFormDatas = ref<ServerItem[]>([
  { name: 'VM1' }
])

3. validateFields验证单个字段使用方式

createFormRef.value.validateFields([[index, 'name']])

谢谢~~

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐