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
alibaba · Jun 18, 2021 · 2517f80 · 2517f80
1 parent c711176
commit 2517f80
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 22 deletions.
diff --git 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
@@ -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
@@ -8,13 +8,15 @@ 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
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -10,13 +10,15 @@ 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
 }
 
 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
@@ -5,23 +5,24 @@ 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}
         onClick={(e) => {
           if (props.onClick) {
             props.onClick(e)
           }
-          if (props.onSubmit) {
-            form.submit(props.onSubmit)
+          if (onSubmit) {
+            form.submit(onSubmit).catch(onSubmitFailed)
           }
         }}
       >