From 2517f807f7440589c5db0ea8affef245a2f468e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=8E=E6=B5=AA?= <9269391@qq.com>
Date: Fri, 18 Jun 2021 10:34:59 +0800
Subject: [PATCH] feat(antd/next): add Form and Submit components submitFailed
 callback events (#1597)

* feat(antd): add Form and Submit onSubmitFailed callback event

* feat(next): add Form and Submit onSubmitFailed callback event
---
 packages/antd/docs/components/Form.md   | 15 +++++++++------
 packages/antd/docs/components/Submit.md |  8 +++++++-
 packages/antd/src/form/index.tsx        |  4 +++-
 packages/antd/src/submit/index.tsx      |  5 +++--
 packages/next/docs/components/Form.md   | 15 +++++++++------
 packages/next/docs/components/Submit.md |  8 +++++++-
 packages/next/src/form/index.tsx        |  4 +++-
 packages/next/src/submit/index.tsx      |  9 +++++----
 8 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/packages/antd/docs/components/Form.md b/packages/antd/docs/components/Form.md
index 0a5d84f94c4..d3d3d2a5089 100644
--- a/packages/antd/docs/components/Form.md
+++ b/packages/antd/docs/components/Form.md
@@ -26,6 +26,7 @@ export default () => (
     layout="vertical"
     feedbackLayout="terse"
     onAutoSubmit={console.log}
+    onAutoSubmitFailed={console.log}
   >
     <FormGrid maxColumns={4}>
       <Field
@@ -47,6 +48,7 @@ export default () => (
       <Field
         name="bb"
         title="输入框"
+        required
         decorator={[FormItem]}
         component={[Input]}
       />
@@ -84,9 +86,10 @@ export default () => (
 
 布局相关的 API 属性，我们参考 [FormLayout](./form-layout)即可，剩下是 Form 组件独有的 API 属性
 
-| 属性名                 | 类型                                               | 描述                               | 默认值 |
-| ---------------------- | -------------------------------------------------- | ---------------------------------- | ------ |
-| form                   | [Form](https://core.formilyjs.org/api/models/form) | Form 实例                          | -      |
-| component              | string                                             | 渲染组件，可以指定为自定义组件渲染 | `form` |
-| previewTextPlaceholder | ReactNode                                          | 预览态占位符                       | `N/A`  |
-| onAutoSubmit           | `(values:any)=>any`                                | 回车提交事件回调                   | -      |
+| 属性名                 | 类型                                                                                             | 描述                               | 默认值 |
+| ---------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------- | ------ |
+| form                   | [Form](https://core.formilyjs.org/api/models/form)                                               | Form 实例                          | -      |
+| component              | string                                                                                           | 渲染组件，可以指定为自定义组件渲染 | `form` |
+| previewTextPlaceholder | ReactNode                                                                                        | 预览态占位符                       | `N/A`  |
+| onAutoSubmit           | `(values:any)=>any`                                                                              | 回车提交事件回调                   | -      |
+| onAutoSubmitFailed     | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 回车提交校验失败事件回调           | -      |
diff --git a/packages/antd/docs/components/Submit.md b/packages/antd/docs/components/Submit.md
index 72db2ee0783..25e3c2182f2 100644
--- a/packages/antd/docs/components/Submit.md
+++ b/packages/antd/docs/components/Submit.md
@@ -91,6 +91,7 @@ export default () => (
             }, 2000)
           })
         }}
+        onSubmitFailed={console.log}
       >
         提交
       </Submit>
@@ -101,4 +102,9 @@ export default () => (
 
 ## API
 
-参考 https://ant.design/components/button-cn/
+按钮相关的 API 属性，我们参考 https://ant.design/components/button-cn/ 即可，剩下是 Submit 组件独有的 API 属性
+
+| 属性名         | 类型                                                                                             | 描述                 | 默认值 |
+| -------------- | ------------------------------------------------------------------------------------------------ | -------------------- | ------ |
+| onSubmit       | `(values: any) => Promise<any> \| any`                                                           | 提交事件回调         | -      |
+| onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | -      |
diff --git a/packages/antd/src/form/index.tsx b/packages/antd/src/form/index.tsx
index 2331e2d3209..e9e221e1e5c 100644
--- a/packages/antd/src/form/index.tsx
+++ b/packages/antd/src/form/index.tsx
@@ -8,6 +8,7 @@ export interface FormProps
   form: Formily.Core.Models.Form
   component?: Formily.React.Types.JSXComponent
   onAutoSubmit?: (values: any) => any
+  onAutoSubmitFailed?: (feedbacks: Formily.Core.Types.IFormFeedback[]) => void
   previewTextPlaceholder?: React.ReactNode
 }
 
@@ -15,6 +16,7 @@ export const Form: React.FC<FormProps> = ({
   form,
   component,
   onAutoSubmit,
+  onAutoSubmitFailed,
   previewTextPlaceholder,
   ...props
 }) => {
@@ -28,7 +30,7 @@ export const Form: React.FC<FormProps> = ({
               onSubmit(e: React.FormEvent) {
                 e?.stopPropagation?.()
                 e?.preventDefault?.()
-                form.submit(onAutoSubmit)
+                form.submit(onAutoSubmit).catch(onAutoSubmitFailed)
               },
             },
             props.children
diff --git a/packages/antd/src/submit/index.tsx b/packages/antd/src/submit/index.tsx
index 08fea2db9ad..440b70fc840 100644
--- a/packages/antd/src/submit/index.tsx
+++ b/packages/antd/src/submit/index.tsx
@@ -5,10 +5,11 @@ import { useForm, observer } from '@formily/react'
 
 export interface ISubmitProps extends ButtonProps {
   onSubmit?: (values: any) => Promise<any> | any
+  onSubmitFailed?: (feedbacks: Formily.Core.Types.IFormFeedback[]) => void
 }
 
 export const Submit: React.FC<ISubmitProps> = observer(
-  ({ onSubmit, ...props }: ISubmitProps) => {
+  ({ onSubmit, onSubmitFailed, ...props }: ISubmitProps) => {
     const form = useForm()
     return (
       <Button
@@ -21,7 +22,7 @@ export const Submit: React.FC<ISubmitProps> = observer(
             props.onClick(e)
           }
           if (onSubmit) {
-            form.submit(onSubmit)
+            form.submit(onSubmit).catch(onSubmitFailed)
           }
         }}
       >
diff --git a/packages/next/docs/components/Form.md b/packages/next/docs/components/Form.md
index 6660a7a38a3..4018f035379 100644
--- a/packages/next/docs/components/Form.md
+++ b/packages/next/docs/components/Form.md
@@ -26,6 +26,7 @@ export default () => (
     layout="vertical"
     feedbackLayout="terse"
     onAutoSubmit={console.log}
+    onAutoSubmitFailed={console.log}
   >
     <FormGrid maxColumns={4}>
       <Field
@@ -47,6 +48,7 @@ export default () => (
       <Field
         name="bb"
         title="输入框"
+        required
         decorator={[FormItem]}
         component={[Input]}
       />
@@ -128,9 +130,10 @@ export default () => (
 
 布局相关的 API 属性，我们参考 [FormLayout](./form-layout)即可，剩下是 Form 组件独有的 API 属性
 
-| 属性名                 | 类型                                               | 描述                               | 默认值 |
-| ---------------------- | -------------------------------------------------- | ---------------------------------- | ------ |
-| form                   | [Form](https://core.formilyjs.org/api/models/form) | Form 实例                          | -      |
-| component              | string                                             | 渲染组件，可以指定为自定义组件渲染 | `form` |
-| previewTextPlaceholder | ReactNode                                          | 预览态占位符                       | `N/A`  |
-| onAutoSubmit           | `(values:any)=>any`                                | 回车提交事件回调                   | -      |
+| 属性名                 | 类型                                                                                             | 描述                               | 默认值 |
+| ---------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------- | ------ |
+| form                   | [Form](https://core.formilyjs.org/api/models/form)                                               | Form 实例                          | -      |
+| component              | string                                                                                           | 渲染组件，可以指定为自定义组件渲染 | `form` |
+| previewTextPlaceholder | ReactNode                                                                                        | 预览态占位符                       | `N/A`  |
+| onAutoSubmit           | `(values:any)=>any`                                                                              | 回车提交事件回调                   | -      |
+| onAutoSubmitFailed     | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 回车提交校验失败事件回调           | -      |
diff --git a/packages/next/docs/components/Submit.md b/packages/next/docs/components/Submit.md
index 55807507adf..4195a13bdc5 100644
--- a/packages/next/docs/components/Submit.md
+++ b/packages/next/docs/components/Submit.md
@@ -91,6 +91,7 @@ export default () => (
             }, 2000)
           })
         }}
+        onSubmitFailed={console.log}
       >
         提交
       </Submit>
@@ -101,4 +102,9 @@ export default () => (
 
 ## API
 
-参考 https://fusion.design/pc/component/basic/button
+按钮相关的 API 属性，我们参考 https://fusion.design/pc/component/basic/button 即可，剩下是 Submit 组件独有的 API 属性
+
+| 属性名         | 类型                                                                                             | 描述                 | 默认值 |
+| -------------- | ------------------------------------------------------------------------------------------------ | -------------------- | ------ |
+| onSubmit       | `(values: any) => Promise<any> \| any`                                                           | 提交事件回调         | -      |
+| onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | -      |
diff --git a/packages/next/src/form/index.tsx b/packages/next/src/form/index.tsx
index 13bed0b909e..0e558b4dbd2 100644
--- a/packages/next/src/form/index.tsx
+++ b/packages/next/src/form/index.tsx
@@ -10,6 +10,7 @@ export interface FormProps
   form: Formily.Core.Models.Form
   component?: Formily.React.Types.JSXComponent
   onAutoSubmit?: (values: any) => any
+  onAutoSubmitFailed?: (feedbacks: Formily.Core.Types.IFormFeedback[]) => void
   previewTextPlaceholder?: React.ReactNode
 }
 
@@ -17,6 +18,7 @@ export const Form: React.FC<FormProps> = ({
   form,
   component,
   onAutoSubmit,
+  onAutoSubmitFailed,
   previewTextPlaceholder,
   ...props
 }) => {
@@ -36,7 +38,7 @@ export const Form: React.FC<FormProps> = ({
               onSubmit(e: React.FormEvent) {
                 e?.stopPropagation?.()
                 e?.preventDefault?.()
-                form.submit(onAutoSubmit)
+                form.submit(onAutoSubmit).catch(onAutoSubmitFailed)
               },
             },
             props.children
diff --git a/packages/next/src/submit/index.tsx b/packages/next/src/submit/index.tsx
index 692ed7aa1a8..e29382d76f5 100644
--- a/packages/next/src/submit/index.tsx
+++ b/packages/next/src/submit/index.tsx
@@ -5,14 +5,15 @@ import { useForm, observer } from '@formily/react'
 
 interface ISubmitProps extends ButtonProps {
   onSubmit?: (values: any) => Promise<any> | any
+  onSubmitFailed?: (feedbacks: Formily.Core.Types.IFormFeedback[]) => void
 }
 
 export const Submit: React.FC<ISubmitProps> = observer(
-  (props: ISubmitProps) => {
+  ({ onSubmit, onSubmitFailed, ...props }: ISubmitProps) => {
     const form = useForm()
     return (
       <Button
-        htmlType={props.onSubmit ? 'button' : 'submit'}
+        htmlType={onSubmit ? 'button' : 'submit'}
         type="primary"
         {...props}
         loading={props.loading !== undefined ? props.loading : form.submitting}
@@ -20,8 +21,8 @@ export const Submit: React.FC<ISubmitProps> = observer(
           if (props.onClick) {
             props.onClick(e)
           }
-          if (props.onSubmit) {
-            form.submit(props.onSubmit)
+          if (onSubmit) {
+            form.submit(onSubmit).catch(onSubmitFailed)
           }
         }}
       >