提交表单校验失败事件优化

examples/components/EventAction/FormEvent.jsx

@@ -86,6 +86,7 @@ export default {
     {
       name: 'form-action-receiver',
       id: 'form-action-receiver',
+      title: "表单：用于接收上面按钮的动作，派发form本身的事件",
       type: 'form',
       debug: true,
       api: '/api/mock2/form/saveForm',
@@ -174,7 +175,7 @@ export default {
                 body: [
                   {
                     type: 'tpl',
-                    tpl: '当前表单项数据：${val|json}'
+                    tpl: '当前表单数据：${val|json}'
                   }
                 ]
               }
@@ -196,7 +197,7 @@ export default {
                 body: [
                   {
                     type: 'tpl',
-                    tpl: '当前表单项数据：${val|json}'
+                    tpl: '当前表单数据：${val|json}'
                   }
                 ]
               }
@@ -277,7 +278,7 @@ export default {
                 val: '${event.data}'
               },
               dialog: {
-                title: '触发表单校验失败事件',
+                title: '触发表单提交失败事件',
                 data: {
                   val: '${val}'
                 },
@@ -292,6 +293,83 @@ export default {
           ]
         }
       }
+    },
+    {
+      type: 'form',
+      debug: true,
+      api: '/api/mock2/form/saveForm',
+      title: "表单：派发formItem的校验事件",
+      data: {
+        data1: '初始化数据1',
+        data2: '初始化数据2'
+      },
+      initApi:
+        'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData',
+      body: [
+        {
+          type: 'input-text',
+          name: 'name',
+          label: '姓名',
+          required: true,
+          validateOnChange: true
+        },
+        {
+          type: 'input-text',
+          name: 'email',
+          label: '邮箱',
+          required: true,
+          validateOnChange: true,
+          validations: {
+            isEmail: true
+          }
+        }
+      ],
+      onEvent: {
+        formItemValidateSucc: {
+          actions: [
+            {
+              actionType: 'dialog',
+              args: {
+                val: '${event.data}'
+              },
+              dialog: {
+                title: '触发表单项校验成功事件',
+                data: {
+                  val: '${val}'
+                },
+                body: [
+                  {
+                    type: 'tpl',
+                    tpl: '当前表单数据：${val|json}'
+                  }
+                ]
+              }
+            }
+          ]
+        },
+        formItemValidateError: {
+          actions: [
+            {
+              actionType: 'dialog',
+              args: {
+                val: '${event.data}'
+              },
+              dialog: {
+                title: '触发表单项校验失败事件',
+                data: {
+                  val: '${val}'
+                },
+                body: [
+                  {
+                    type: 'tpl',
+                    tpl: '当前表单数据：${val|json}'
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
     }
   ]
 };

src/renderers/Form/index.tsx

@@ -785,14 +785,15 @@ export default class Form extends React.Component<FormProps, object> {
   submit(fn?: (values: object) => Promise<any>): Promise<any> {
     const {store, messages, translate: __, dispatchEvent, data} = this.props;
     this.flush();
-
+    const validateErrCb = () => {
+      dispatchEvent('validateFail', createObject(data));
+    };
     return store.submit(
       fn,
       this.hooks['validate'] || [],
-      __(messages && messages.validateFailed)
+      __(messages && messages.validateFailed),
-    ).catch(error => {
+      validateErrCb,
-      dispatchEvent('validateFail', createObject(data));
+    );
-    });
   }
 
   // 如果开启了 lazyChange，需要一个 flush 方法把队列中值应用上。
@@ -861,10 +862,6 @@ export default class Form extends React.Component<FormProps, object> {
     }
   }
 
-  // 问题1：sumbit的时候校验成功事件和提交成功事件的顺序问题 已解决
-  // 问题2：itme开启validateOnChange的时候，如何触发事件 
-  // 问题3：提交到target时候是否需要触发事件，ajax请求里面、drawconfirm里面应该都不需要吧 需要确认
-  // 问题4：确定props.data是如何同步到store.data里面的
   emitChange(submit: boolean) {
     const {onChange, store, submitOnChange, dispatchEvent, data} = this.props;
 
@@ -985,7 +982,6 @@ export default class Form extends React.Component<FormProps, object> {
         }
       });
     }
-    debugger
     if (
       action.type === 'submit' ||
       action.actionType === 'submit' ||
@@ -1702,7 +1698,6 @@ export class FormRenderer extends Form {
     // if (this.props.disabled) {
     //   return;
     // }
-    console.log(action);
     if (action.target && action.actionType !== 'reload') {
       const scoped = this.context as IScopedContext;
 

src/store/form.ts

@@ -455,11 +455,13 @@ export const FormStore = ServiceStore.named('FormStore')
     const submit: (
       fn?: (values: object) => Promise<any>,
       hooks?: Array<() => Promise<any>>,
-      failedMessage?: string
+      failedMessage?: string,
+      validateErrCb: () => void
     ) => Promise<any> = flow(function* submit(
       fn: any,
       hooks?: Array<() => Promise<any>>,
-      failedMessage?: string
+      failedMessage?: string,
+      validateErrCb: () => void
     ) {
       self.submited = true;
       self.submiting = true;
@@ -479,7 +481,7 @@ export const FormStore = ServiceStore.named('FormStore')
           const env = getEnv(self);
 
           msg && env.notify('error', msg);
-
+          validateErrCb && validateErrCb();
           throw new Error(msg);
         }