vue3+ant design的form数组表单,如何校验

首先,先说说我要实现的内容:如下图,点“新增”会添加一个灰框内容,form表单是一个数组,一个灰框为一个对象,各对象保存时各自校验自己表单里的内容,互不干扰!

 

上页面代码(看部分代码就懂了):

 1 <div v-for="(item,index) in formList" :key="index">
 2         <a-form
 3           ref="formRef"
 4           :rules="rules"
 5           :model="formList"
 6           :label-col="{ style: { width: '130px' } }"
 7         >
 8           <a-row :gutter="[24, 24]">
 9             <a-col :span="12">
10               <a-form-item
11                 label="监控点位名称"
12                 :name="[index,'name']"
13                 v-bind="validateInfos.name"
14               >
15                 <a-input
16                   v-model:value.trim="item.name"
17                   placeholder="请输入监控点位名称"
18                   :maxLength="32"
19                   autocomplete="off"
20                 />
21               </a-form-item>
22             </a-col>
23             <a-col :span="12">
24               <a-button type="primary" @click="onSubmit(index)" class="mr">
25                 <template #icon> <SaveOutlined /> </template>保存
26               </a-button>
27             </a-col>
28             <a-col :span="12">
29               <a-form-item
30                 label="横截面积(平方米)"
31                 :name="[index,'waterDevice','area']"
32                 v-bind="validateInfos['waterDevice.area']"
33               >
34                 <a-input-number
35                   id="inputNumber"
36                   v-model:value="item.waterDevice.area"
37                   placeholder="请输入横截面积"
38                   :min="0"
39                   :max="999"
40                   style="width: 319px;"
41                 />
42               </a-form-item>
43             </a-col>
44             <a-col :span="12">
45               <a-form-item
46                 label="废水桶高度(米)"
47                 :name="[index,'waterDevice','height']"
48                 v-bind="validateInfos['waterDevice.height']"
49               >
50                 <a-input-number
51                   id="inputNumber"
52                   v-model:value="item.waterDevice.height"
53                   placeholder="请输入废水桶高度"
54                   :min="0"
55                   :max="999"
56                   style="width: 300px;"
57                 />
58               </a-form-item>
59             </a-col>
60           </a-row>
61         </a-form>
62       </div>

上JS 代码(vue3):

 

如果要清空校验信息,就加上  resetFields ,  业务没有用到,就不加到上面代码中了

引入
const { resetFields,validate,validateInfos } = useForm(formList, rules);

用法:
proxy.$refs.formRef[key].validate()

 

热门相关:我有一座冒险屋   我是仙凡   慕少,你老婆又重生了   宠物小精灵之庭树   网游三国之城市攻略