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，获取子组件中的validateForm
    const [validPopError] = await to(calendar.value.validateForm());

    if (validError || validPopError) {
      message.error('表单校验失败，请检查');
      return;
    }
     // 新增逻辑
      handleAdd();
  };