问题背景
Arco Design组件库中,Form表单组件可以通过设定表单项的rules属性或在表单中绑定rules数组实现表单验证。如果想实现表单全部验证通过后再提交表单,则可以使用form组件的submit-success事件。
然而,当form组件存在于modal组件中时,modal组件的确认按钮并不会触发form组件的验证,即使给确认按钮加上了:ok-button-props="{ htmlType: 'submit' }
的属性。
本例使用Vue3+TypeScript。
解决方案
查看form组件自带的函数。
我们发现可以主动触发它的validate()函数对表单进行校验。
modal组件提供了异步关闭对话框的方式。on-before-ok指定的回调函数如果返回了false,就不会触发ok事件。
首先为modal组件绑定号on-before-ok函数:
:on-before-ok="handleSubmit"
要调用组件的方法,需要获取到组件实例。首先为form组件绑定ref参数
ref="registerFormRef"
随后,在handleSubmit函数中调用实例方法。
const registerFormRef = ref(null);
const handleSubmit = async () => {
const error = await registerFormRef.value?.validate();
if (!error) {
//提交表单逻辑
return true;//return true就会关闭对话框
}
return false;
}
比较值得注意的一点是,vue3不再支持this.$refs的方式访问ref实例方法,只能通过.value的方式。这种方式ide不会联想出函数列表。