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>