Vue3 TS antd 表单数据为对象数组的时候如何实现动态验证
·
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']])
谢谢~~
更多推荐
所有评论(0)