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>

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/articles/17244965.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！