antd + VUE循环form-item的校验

VUE 对form绑定ref和model循环项为item，下标为index（可换，不重要）改变form-item的name为数组形式，第一个参数为循环列表的名字，第二个参数为index，第三个参数为此项标识。输入控件绑定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 定义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,}}

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

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

<a-input-numberv-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),

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

<a-input-numberv-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"
/>