feat: support onFinishFailed (#24)

* support onFinishFailed

* update docs

* clean up

Author: zombieJ

README.md

@@ -61,16 +61,18 @@ We use typescript to create the Type definition. You can view directly in IDE. B
 
 ## Form
 
-| Prop             | Description                                        | Type                                  | Default          |
-| ---------------- | -------------------------------------------------- | ------------------------------------- | ---------------- |
-| component        | Customize Form render component                    | string \| Component \| false          | form             |
-| fields           | Control Form fields status. Only use when in Redux | [FieldData](#fielddata)[]             | -                |
-| form             | Set form instance created by `useForm`             | [FormInstance](#useform)              | `Form.useForm()` |
-| initialValues    | Initial value of Form                              | Object                                | -                |
-| name             | Config name with [FormProvider](#formprovider)     | string                                | -                |
-| validateMessages | Set validate message template                      | [ValidateMessages](#validatemessages) | -                |
-| onFieldsChange   | Trigger when any value of Field changed            | (changedFields, allFields): void      | -                |
-| onValuesChange   | Trigger when any value of Field changed            | (changedValues, values): void         | -                |
+| Prop             | Description                                        | Type                                       | Default          |
+| ---------------- | -------------------------------------------------- | ------------------------------------------ | ---------------- |
+| component        | Customize Form render component                    | string \| Component \| false               | form             |
+| fields           | Control Form fields status. Only use when in Redux | [FieldData](#fielddata)[]                  | -                |
+| form             | Set form instance created by `useForm`             | [FormInstance](#useform)                   | `Form.useForm()` |
+| initialValues    | Initial value of Form                              | Object                                     | -                |
+| name             | Config name with [FormProvider](#formprovider)     | string                                     | -                |
+| validateMessages | Set validate message template                      | [ValidateMessages](#validatemessages)      | -                |
+| onFieldsChange   | Trigger when any value of Field changed            | (changedFields, allFields): void           | -                |
+| onFinish         | Trigger when form submit and success               | (values): void                             | -                |
+| onFinishFailed   | Trigger when form submit and failed                | ({ values, errorFields, outOfDate }): void | -                |
+| onValuesChange   | Trigger when any value of Field changed            | (changedValues, values): void              | -                |
 
 ## Field
 

examples/validate-perf.tsx

@@ -30,6 +30,10 @@ export default class Demo extends React.Component {
     console.log('Finish:', values);
   };
 
+  public onFinishFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+  };
+
   public render() {
     return (
       <div>
@@ -38,6 +42,7 @@ export default class Demo extends React.Component {
           ref={this.setForm}
           style={{ padding: 16 }}
           onFinish={this.onFinish}
+          onFinishFailed={this.onFinishFailed}
           validateMessages={myMessages}
           initialValues={{ remember: true }}
         >

src/Form.tsx

@@ -28,6 +28,7 @@ export interface FormProps extends BaseFormProps {
   onValuesChange?: Callbacks['onValuesChange'];
   onFieldsChange?: Callbacks['onFieldsChange'];
   onFinish?: Callbacks['onFinish'];
+  onFinishFailed?: Callbacks['onFinishFailed'];
 }
 
 const Form: React.FunctionComponent<FormProps> = (
@@ -42,6 +43,7 @@ const Form: React.FunctionComponent<FormProps> = (
     onValuesChange,
     onFieldsChange,
     onFinish,
+    onFinishFailed,
     ...restProps
   }: FormProps,
   ref,
@@ -90,6 +92,7 @@ const Form: React.FunctionComponent<FormProps> = (
         onFinish(values);
       }
     },
+    onFinishFailed,
   });
 
   // Set initial value, init store value when first mount

src/interface.ts

@@ -139,6 +139,7 @@ export interface Callbacks {
   onValuesChange?: (changedValues: Store, values: Store) => void;
   onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
   onFinish?: (values: Store) => void;
+  onFinishFailed?: (errorInfo: ValidateErrorEntity) => void;
 }
 
 export interface InternalHooks {

src/useForm.ts

@@ -487,7 +487,7 @@ export class FormStore {
           if (this.lastValidatePromise === summaryPromise) {
             return Promise.resolve(this.store);
           }
-          return Promise.reject([]);
+          return Promise.reject<string[]>([]);
         },
       )
       .catch((results: { name: InternalNamePath; errors: string[] }[]) => {
@@ -514,8 +514,12 @@ export class FormStore {
           onFinish(values);
         }
       })
-      // Do nothing about submit catch
-      .catch(e => e);
+      .catch(e => {
+        const { onFinishFailed } = this.callbacks;
+        if (onFinishFailed) {
+          onFinishFailed(e);
+        }
+      });
   };
 }
 

tests/index.test.js

@@ -319,9 +319,10 @@ describe('Form.Basic', () => {
 
   it('submit', async () => {
     const onFinish = jest.fn();
+    const onFinishFailed = jest.fn();
 
     const wrapper = mount(
-      <Form onFinish={onFinish}>
+      <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
         <InfoField name="user" rules={[{ required: true }]}>
           <Input />
         </InfoField>
@@ -335,13 +336,22 @@ describe('Form.Basic', () => {
     wrapper.update();
     matchError(wrapper, "'user' is required");
     expect(onFinish).not.toHaveBeenCalled();
+    expect(onFinishFailed).toHaveBeenCalledWith({
+      errorFields: [{ name: ['user'], errors: ["'user' is required"] }],
+      outOfDate: false,
+      values: {},
+    });
+
+    onFinish.mockReset();
+    onFinishFailed.mockReset();
 
     // Trigger
     await changeValue(getField(wrapper), 'Bamboo');
     wrapper.find('button').simulate('submit');
     await timeout();
     matchError(wrapper, false);
     expect(onFinish).toHaveBeenCalledWith({ user: 'Bamboo' });
+    expect(onFinishFailed).not.toHaveBeenCalled();
   });
 
   it('getInternalHooks should not usable by user', () => {