Merge pull request #1571 from alibaba/fix-drawerlist-validate-issuze

fix:修复drawerlist 浮层中校验相关问题
alibaba · Oct 15, 2024 · a717ba1 · a717ba1
2 parents 41c91a5 + 17ff989
commit a717ba1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/docs/form-render/api-schema.md b/docs/form-render/api-schema.md
@@ -161,10 +161,10 @@ rules: [
 
 
 ### action
-- 描述：输入控件支持配置自定义功能槽，显示在输入控件右边，通过 actions 值和 widgets 字段间映射，渲染自定义自定义功能槽。
+- 描述：输入控件支持配置自定义功能槽，显示在输入控件右边，通过 action 值和 widgets 字段间映射，渲染自定义自定义功能槽。
 - 类型
 ```js
-actions: 'toolWidget' | { widget: 'toolWidget' } // toolWidget 通过 widgets 透传
+action: 'toolWidget' | { widget: 'toolWidget' } // toolWidget 通过 widgets 透传
 ```
 
 ## 三、嵌套控件配置项

diff --git a/packages/form-render/src/models/useForm.ts b/packages/form-render/src/models/useForm.ts
@@ -96,7 +96,7 @@ const useForm = () => {
 
   const setStoreData = (data: any) => {
     const { setState } = storeRef.current;
-    
+
     if (!setState) {
       setTimeout(() => {
         setState({ schema: schemaRef.current, flattenSchema: flattenSchemaRef.current });
@@ -195,7 +195,7 @@ const useForm = () => {
         form.setFieldValue(name, value);
       }
     } catch (error) {
-      
+
     }
   }
 
@@ -324,13 +324,14 @@ const useForm = () => {
   }
 
   // 触发表单验证
-  xform.validateFields = (pathList?: string[]) => {
+  xform.validateFields = (pathList?: string[], config?: object) => {
     const nameList = (pathList || []).map(path => getFieldName(path));
     if (nameList.length > 0) {
-      return validateFields(nameList);
+      return validateFields(nameList, config);
     }
     return validateFields();
-  }
+  };
+
 
   xform.getFlattenSchema = (path?: string) => {
     if (!path) {
@@ -356,4 +357,4 @@ const useForm = () => {
   return xform as FormInstance;
 };
 
-export default useForm;
+export default useForm;
diff --git a/packages/form-render/src/render-core/FieldItem/main.tsx b/packages/form-render/src/render-core/FieldItem/main.tsx
@@ -21,8 +21,8 @@ import {
   FieldWrapperStatus
 } from './field';
 
-import { 
-  getParamValue, 
+import {
+  getParamValue,
   getFieldProps,
   getPath,
   getLabel,
@@ -39,7 +39,7 @@ export default (props: any) => {
   const upperCtx: any = useContext(UpperContext);
 
   const { form, widgets, methods, globalProps } = configCtx;
-  const { 
+  const {
     reserveLabel,
     hidden,
     properties,
@@ -52,7 +52,7 @@ export default (props: any) => {
   } = schema;
 
   const getValueFromKey = getParamValue(formCtx, upperCtx, schema);
-  
+
   const widgetName = getWidgetName(schema);
   let Widget = getWidget(widgetName, widgets);
 
@@ -82,7 +82,7 @@ export default (props: any) => {
   }
 
   if (schema.type === 'void') {
-    return ( 
+    return (
       <Col span={24}>
         <Widget {...fieldProps } />
       </Col>
@@ -180,7 +180,7 @@ export default (props: any) => {
     label = null;
     if (displayType === 'row') {
       label = 'fr-hide-label';
-    } 
+    }
   }
 
   const initialValue = schema.default ?? schema.defaultValue;
@@ -205,20 +205,20 @@ export default (props: any) => {
       validateTrigger={ validateTrigger ?? (fieldRef?.current?.validator ? 'onSubmit' : 'onChange') }
     >
       {fieldProps.onStatusChange ? (
-        <FieldWrapperStatus 
+        <FieldWrapperStatus
           Field={Widget}
           fieldProps={fieldProps}
           maxWidth={maxWidth}
           initialValue={initialValue}
-          acitonRender={() => action}
+          acitonRender={action ? () => action : undefined}
         />
       ) : (
         <FieldWrapper
           Field={Widget}
           fieldProps={fieldProps}
           maxWidth={maxWidth}
           initialValue={initialValue}
-          acitonRender={() => action}
+          acitonRender={action ? () => action : undefined}
         />
       )}
     </Form.Item>
@@ -227,7 +227,7 @@ export default (props: any) => {
   if (inlineSelf) {
     if (noStyle) {
       return (
-        <div 
+        <div
           className={classnames('fr-inline-field', { 'fr-field-visibility': !visible, [schema.className] : !! schema.className })}
         >
           {formItem}
@@ -238,11 +238,11 @@ export default (props: any) => {
   }
 
   return (
-    <Col 
-      span={span} 
+    <Col
+      span={span}
       className={classnames(null, { 'fr-field-visibility': !visible })}
     >
       {formItem}
     </Col>
   );
-}
+}
diff --git a/packages/form-render/src/widgets/listDrawer/index.tsx b/packages/form-render/src/widgets/listDrawer/index.tsx
@@ -105,17 +105,6 @@ const TableList: React.FC<Props> = (props: any) => {
     indexRef.current = null;
   };
 
-  const hanldeConfirm = () => {
-    form
-      .validateFields()
-      .then(res => {
-        handleCloseDrawer();
-      })
-      .catch(error => {
-        console.log('表单校验错误', error);
-      });
-  };
-
   const columns: any = sortProperties(Object.entries(columnSchema))
     .map(([dataIndex, item]) => {
       const { required, title, tooltip, width, columnHidden } = item;
@@ -251,6 +240,19 @@ const TableList: React.FC<Props> = (props: any) => {
 
   const drawerIndex = indexRef.current ?? (fields.length - 1);
 
+  const hanldeConfirm = () => {
+    const path = [...rootPath, drawerIndex]?.join('.');
+    form
+      .validateFields([path], { recursive: true })
+      .then(res => {
+        handleCloseDrawer();
+      })
+      .catch(error => {
+        console.log('表单校验错误', error);
+      });
+  };
+
+
   return (
     <div className='fr-list-drawer'>
       <Table