fix(ProForm): 通过ref可获取表单方法

Author: ChenlingasMx

examples/base/src/pages/Demo/Detail/index.tsx

@@ -32,6 +32,16 @@ const Detail = ({ updateData }: DetailProps) => {
   const form = useForm()
   const form2 = useForm()
 
+  const asyncAwaitFormList: any = (arr = []) => {
+    return (
+      arr &&
+      arr.length > 0 &&
+      Promise.all(arr).then((vals) => {
+        return vals
+      })
+    )
+  }
+
   const onClose = () => dispatch({ type: 'demo/clean' })
 
   // 模拟搜索
@@ -45,20 +55,12 @@ const Detail = ({ updateData }: DetailProps) => {
   }
 
   const handleSave = async () => {
-    // 触发验证
-    await form.submitvalidate()
-    await form2.submitvalidate()
-
-    // 获取错误信息
-    const errors = form.getError()
-    const errors2 = form2.getError()
-
-    if (errors && Object.keys(errors).length > 0) return
-    if (errors2 && Object.keys(errors2).length > 0) return
-    // 调用接口
-    const datas1 = form.getFieldValues() || {}
-    const datas2 = form.getFieldValues() || {}
-    console.log('obj', { ...datas1, ...datas2 })
+    // 触发验证获取值
+    const values = await asyncAwaitFormList([
+      form?.validateFieldsAndGetValue(),
+      form2?.validateFieldsAndGetValue(),
+    ])
+    console.log('values', values)
   }
 
   return (

packages/components/src/ProForm/formdom.tsx

@@ -27,7 +27,9 @@ function FormDom({
   const store = useStore();
   const colProps = useColPropsContext();
 
-  const { setFormState } = store as any;
+  const { setFormState } = store as {
+    setFormState: ((p: any) => void) | undefined;
+  };
 
   // 通过store获取表单实例
   useEffect(() => setFormState?.(baseRef), [baseRef]);
@@ -36,6 +38,7 @@ function FormDom({
   useEffect(() => {
     formInstanceRef.current = baseRef;
   }, [baseRef]);
+
   return (
     <Form
       ref={baseRef}

packages/components/src/ProForm/hooks/useForm.tsx

@@ -14,7 +14,7 @@ const useForm = () => {
   const getError = () => formState?.current?.getError() || {};
 
   // 验证并获取表单值
-  const validateFieldsAndGetValue = async () => {
+  const validateFieldsAndGetValue = () => {
     return new Promise(async function (resolve, reject) {
       await submitvalidate();
       const errors = getError();

packages/components/src/ProForm/index.tsx

@@ -5,6 +5,7 @@ import ReadFormDom from './readform';
 import { getFormFields } from './widgets';
 import { ProFormProps, UseFormStateProps, UseFormProps } from './type';
 import { StoreCtx, ColPropsContext } from './hooks/store';
+import { isObjectEmpty } from './utils';
 import './style/form-item.less';
 
 function ProForm(
@@ -36,9 +37,33 @@ function ProForm(
 
   const store = useMemo(() => ({ setFormState }), [form]);
 
-  // 通过ref导出实例方法
   const formInstanceRef = useRef<{ current: UseFormStateProps }>();
-  useImperativeHandle(ref, () => ({ ...form }));
+
+  // 通过ref导出实例方法
+  useImperativeHandle(ref, () => {
+    const { onSubmit, getError, getFieldValues } =
+      formInstanceRef?.current?.current || {};
+    // 表单验证(同时兼容老api submitvalidate和新api onSubmit )
+    const submitvalidate = () => onSubmit?.() || null;
+    // 验证并获取表单值
+    const validateFieldsAndGetValue = () => {
+      return new Promise(async function (resolve, reject) {
+        await submitvalidate();
+        const errors = getError?.() || {};
+        if (isObjectEmpty(errors)) {
+          const value = getFieldValues?.() || {};
+          resolve(value);
+        } else {
+          reject(errors);
+        }
+      });
+    };
+    return {
+      ...formInstanceRef.current?.current,
+      submitvalidate,
+      validateFieldsAndGetValue,
+    };
+  });
 
   let children: React.ReactNode;
   const formDomProps = { ...props, formfields, formInstanceRef };