vue3中基于AntDesign的Form嵌套表单的校验

场景：在新增数据弹框中有一个form1和组件form2,在点击新增时进行两个表单的校验

在组件表单2中

  const validateForm = () => {return new Promise((resolve, reject) => {modalFormPopRef.value.validate().then((res) => {resolve(res);}).catch((err) => {reject(err);});});};defineExpose({validateForm});

在父组件中

  import to from 'await-to-js';const handleModalOk = async () => {// 校验表单// from1校验const [validError] = await to(modalFormRef.value.validate());// 组件form2校验// 通过组件上的ref属性calendar，获取子组件中的validateFormconst [validPopError] = await to(calendar.value.validateForm());if (validError || validPopError) {message.error('表单校验失败，请检查');return;}// 新增逻辑handleAdd();};