antd + VUE循环form-item的校验（单层循环、多层循环）

单层循环

HTML

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>

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,
        }
	}

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

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"
/>

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

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"
/>

双层循环

校验效果：

HTML

1. 对form绑定ref和model，在ts中通过ref进行校验，由于是这里以及是外层循环内部了，所以ref要用函数的形式设置
2. 循环项为item，下标为index（可换，不重要）
3. 改变form-item的name为数组形式，第一个参数为循环列表的名字，第二个参数为index，第三个参数为此项标识。
4. 输入控件绑定model为 item.此项标识

<a-card v-for="(item, oneIndex) in oneList" :key="item.id" :title="item.name" class="questionnaire-item-card">
	<a-form :ref="(el: any) => setFormRef(el, questionnaireIndex)" :model="item" style="width: 100%" layout="inline">
	    <div v-for="(option, index) in item.twoList" :key="option.id" class="questionnaire-option-item">
	        <a-form-item
	            style="display: inline"
	            :name="['twoList', index, 'score']"
	            :label="option.name"
	            :rules="[{ required: true, message: '请填写对应选项分数', trigger: 'change' }]"
	        >
	            <a-input-number v-model:value="option.score" :precision="0" allow-clear placeholder="请输入" />
	        </a-form-item>
	    </div>
	</a-form>
</a-card>

TS

1. 定义ref、model

import { type FormInstance } from 'ant-design-vue';
const formRef = ref<FormInstance[]>([]);
const oneList = ref<any[]>([
	{
		id: 1,
		name: "单选1",
		twoList: [
			{
				name: "选项一",
				score: 0,
			},
			{
				name: "选项二",
				score: 0,
			}
		]
	},
	{
		id: 2,
		name: "单选2",
		twoList: [
			{
				name: "选项一",
				score: 0,
			},
			{
				name: "选项二",
				score: 0,
			}
		]
	},
	{
		id: 3,
		name: "多选4",
		twoList: [
			{
				name: "选项一",
				score: 0,
			},
			{
				name: "选项二",
				score: 0,
			}
		]
	},
])

2. 定义设置表单ref的函数

function setFormRef(el: any, index: number) {
    if (el) {
        formRef.value[index] = el as FormInstance;
    }
}

3. 调用表单校验，需要异步可以自选加async await

formRef.value.forEach((it) => it.validate());