vue3 + Ant design vue formItem 无法使用嵌套的form表单校验

---

前言

提示：

---

一、背景在这里插入代码片

• 背景：
  • Ant design vue + vue3的项目，后端的数据格式为对象套对象，绑定数据的时候发现，第二次的formItem表单校验没有效果，出现以下问题：
  • 理想场景：输入一部分的必填项，点击确定，表单校验不通过的提示，不请求接口及其后续操作。
  • 实际场景：输入一部分的必填项，点击确定，直接请求新增/编辑接口，然后跳转页面。
• 技术定位：初级

二、操作步骤

1.复现前的准备工作

（1）vue版本和ant design vue 版本

"ant-design-vue": "^3.2.20",
"vue": "^3.2.33",

（2）任意页面的代码

如下面代码示例， 对象password.ps1使用表单校验，没有输入任何数据，表单校验仍然通过了

<template>
  <div>{{ formState }}</div>
  <Form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <FormItem label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <Input v-model:value="formState.username" />
    </FormItem>

    <FormItem label="Password" name="password.ps1"
      :rules="[{ required: true, message: 'Please input your username!' }]">
      <InputPassword v-model:value="formState.password.ps1" />
    </FormItem> {{ formState.password.ps1 }}
    <FormItem :wrapper-col="{ offset: 8, span: 16 }">
      <Button type="primary" html-type="submit">Submit</Button>
    </FormItem>
  </Form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { Form, FormItem, Input, InputPassword, Button } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form';
interface objpasType {
  ps1: string,
  ps2: string,
}
interface FormStateType {
  username: string;
  password: objpasType;
  remember: boolean;
}
const rules: Record<string, Rule[]> = {
  username: [{ required: true, message: '请输入', trigger: 'change' }],
  'password.ps1': [{ required: true, message: '请输入', trigger: 'change' }],
}
const formState = reactive<FormStateType>({
  username: '',
  password: {
    ps1: '',
    ps2: '',
  },
  remember: true,
});
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

2.解决问题

当我们使用自定义表单校验后，虽然values里面的值依旧为空，但是通过了表单校验

3.自定义表单校验的代码

<template>
  <div>{{ formState }}</div>
  <Form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <FormItem label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <Input v-model:value="formState.username" />
    </FormItem>

    <FormItem label="Password" name="password.ps1"
      :rules="[{ required: true, validator: (rules) => checkSchedulingCycle(rules, formState.password.ps1), }]">
      <InputPassword v-model:value="formState.password.ps1" />
    </FormItem> {{ formState.password.ps1 }}
    <FormItem :wrapper-col="{ offset: 8, span: 16 }">
      <Button type="primary" html-type="submit">Submit</Button>
    </FormItem>
  </Form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { Form, FormItem, Input, InputPassword, Button } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form';
interface objpasType {
  ps1: string,
  ps2: string,
}
interface FormStateType {
  username: string;
  password: objpasType;
  remember: boolean;
}
// const rules: Record<string, Rule[]> = {
//   username: [{ required: true, message: '请输入', trigger: 'change' }],
//   'password.ps1': [{ required: true, message: '请输入', trigger: 'change' }],
// }
const checkSchedulingCycle = async (_rule: Rule, value: any) => {
  console.log('rules', value)
  if (!value) return Promise.reject('ps1不能为空');
  return Promise.resolve();
};
const formState = reactive<FormStateType>({
  username: '',
  password: {
    ps1: '',
    ps2: '',
  },
  remember: true,
});
const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

---

总结

ant design vue 不支持嵌套表格的表单校验，只能使用自定义表单校验