vue3+ant design vue实现表单校验记载清空

1、景象：假设在弹窗中存在表单校验，当触发后，弹出校验提示信息之后关闭弹窗，然后重新打开弹窗会发现原校验记载信息依旧存在，此时就必要清空。
2、代码

1. <a-modal v-model:open="open" title="心愿形式新增:" :footer="null" @cancel="cancel">
2.    <div>
3.        <a-form
4.         ref="form"
5.         :model="formStateAdd"
6.         :label-col="{ span: 8 }"
7.         :wrapper-col="{ span: 16 }"
8.        >
9.           <a-row :gutter="[16, 24]">
10.             <a-col :span="16">
11.               <a-form-item
12.                 name="name"
13.                 label="样式名称"
14.                 labelAlign="left"
15.                 :rules="[{ required: true, message: '请输入样式名称', trigger: 'blur' }]"
16.               >
17.                 <a-input
18.                   v-model:value="formStateAdd.name"
19.                   autocomplete="off"
20.                   placeholder="请输入样式名称"
21.                 />
22.               </a-form-item>
23.             </a-col>
24.           </a-row>
25.           <a-row :gutter="[16, 24]">
26.             <a-col :span="16">
27.               <a-form-item
28.                 name="upload"
29.                 label="文件"
30.                 labelAlign="left"
31.                 :rules="[{ required: true, message: '请上传文件', trigger: 'blur' }]"
32.               >
33.                 <a-upload
34.                   v-model:file-list="fileList"
35.                   name="文件上传"
36.                   action=""
37.                   :customRequest="upDown"
38.                   :beforeUpload="beforeUpload"
39.                   @remove="removeFile"
40.                 >
41.                   <upload-outlined></upload-outlined>
42.                 </a-upload>
43.               </a-form-item>
44.             </a-col>
45.           </a-row>
46.           <a-row :gutter="[16, 24]">
47.             <a-col :span="16">
48.               <a-form-item
49.                 name="enableStatus"
50.                 label="状态"
51.                 labelAlign="left"
52.                 :rules="[{ required: true, message: '请选择状态', trigger: 'blur' }]"
53.               >
54.                 <a-radio-group v-model:value="formStateAdd.enableStatus">
55.                   <a-radio value="1">启用</a-radio>
56.                   <a-radio value="2">禁用</a-radio>
57.                 </a-radio-group>
58.               </a-form-item>
59.             </a-col>
60.           </a-row>
61.       </a-form>
62.    </div>
63.    <div class="div_btn">
64.       <a-space>
65.         <a-button type="primary" @click="submit">发布</a-button>
66.         <a-button @click="cancel">取消</a-button>
67.       </a-space>
68.    </div>
69. </a-modal>
72. const form = ref(null);
73. //取消
74.   const cancel = () => {
75.     nextTick(() => {
76.       open.value = false;
77.       form.value.resetFields();
78.       formStateAdd.value = { name: '', enableStatus: '' };
79.       fileList.value = [];
80.     });
81.   };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。