Arco Design Modal对话框组件嵌套form表单组件实现验证成功后提交表单

问题背景

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不会联想出函数列表。