arco-design组件库modal使用form无法关闭的情况
问题
在使用 arco-design-vue 组件库时需要在modal中验证form-item是否为空值,官方给出的案例没有非常清楚。在返回一个promise后,then方法返回的值如果存在则代表存在form抛错,如果为undefined则代表验证通过。这里记录一下。
代码
const handleEditModalOk = async () => {
return new Promise((resolve, reject) => {
formRef.value.validate().then(async (res: any) => {
if (!res) {
// 异步操作
resolve(true)
}
resolve(false)
}).catch((error: any) => {
resolve(false)
})
})
};
<a-modal @before-ok="handleEditModalOk">
<template #title>
修改名称
</template>
<a-form ref="formRef" :model="modalForm">
<a-form-item field="name" label="名称"
:rules="[{ required: true, message: '名称不能为空' }]">
<a-input v-model="modalForm.name" placeholder="名称" />
</a-form-item>
</a-form>
</a-modal>