antd + VUE循环form-item的校验_vue antdesign form循环

VUE

1. 对form绑定ref和model
2. 循环项为item，下标为index（可换，不重要）
3. 改变form-item的name为数组形式，第一个参数为循环列表的名字，第二个参数为index，第三个参数为此项标识。
4. 输入控件绑定model为 item.此项标识

<a-form ref="validationFormRef" :model="validationForm">
	<template v-for="(item, index) in validationForm.list" :key="item.id">
         <a-form-item :name="['list', index, 'num']" label="个数" :rules="[intRule]">
             <a-input-number v-model:value="item.num" />
         </a-form-item>
    </template>
</a-form>
1
2
3
4
5
6
7

TS

1. 定义ref、model

import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
export default defineComponent({
	setup() {
		const validationFormRef = ref<FormInstance | null>(null);
		const validationForm = reactive<any>({
            list: [.......], // 循环的列表
        });
		
		const isInteger = (_: Rule, value: any) => {
			// 判断是否为正整数
            const r = /^[1-9][0-9]*$/;
            if (value && !r.test(value.toString())) {
                return Promise.reject(new Error('请输入正整数！'));
            }
            return Promise.resolve();
        };

        const intRule: Rule = { validator: isInteger, trigger: 'change' };

		const hasFormError = async () => {
			// 表单验证
            let values;
            try {
                values = await validationFormRef.value?.validateFields();
            } catch (errorInfo) {
                console.log(errorInfo);
            }
            return !values;
        },

		return {
            validationFormRef,
            validationForm,
            intRule,
        }
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

也可以利用组件自带的参数去格式化

formatter

没有提示了，但是输入小数会自动四舍五入

<a-input-number
   v-model:value="item.size"
    placeholder="请输入"
    type="number"
    :min="1"
    :default-value="1"
    :formatter="formatterInt"
    addon-after="MB"
    class="sg-margin-l-4 sg-width-full-100"
/>
1
2
3
4
5
6
7
8
9
10

formatterInt: (value: number) => Math.round(value),
1

precision

组件也可以直接格式化保留小数位数:precision="0"，但是需要focus离开之后才格式化

<a-input-number
   v-model:value="item.size"
    placeholder="请输入"
    type="number"
    :min="1"
    :default-value="1"
    :precision="0"
    addon-after="MB"
    class="sg-margin-l-4 sg-width-full-100"
/>
1
2
3
4
5
6
7
8
9
10