fix(form): add param named firstError (#1320)

* fix(form): add param named firstError form组件onSubmit回调补充firstError参数 fix #1302 * fix(Form): fix demo * feat: redo * fix(form): add param fix #1320 --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Apr 19, 2024 · 40d6b4f · 40d6b4f
1 parent aa943c3
commit 40d6b4f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/form/demos/horizontal.vue b/src/form/demos/horizontal.vue
@@ -288,8 +288,8 @@ const onSubmit = (e: any) => {
 };
 
 const rules = {
-  name: [{ validator: (val: any) => val === 8, message: '只能输入8个字符英文' }],
-  password: [{ validator: (val: any) => val > 6, message: '长度大于6个字符' }],
+  name: [{ validator: (val: any) => val.length === 8, message: '只能输入8个字符英文' }],
+  password: [{ validator: (val: any) => val.length > 6, message: '长度大于6个字符' }],
   gender: [{ validator: (val: any) => val !== '', message: '不能为空' }],
   birth: [{ validator: (val: any) => val !== '', message: '不能为空' }],
   place: [{ validator: (val: any) => val !== '', message: '不能为空' }],

diff --git a/src/form/demos/vertical.vue b/src/form/demos/vertical.vue
@@ -275,8 +275,8 @@ const onSubmit = (e: any) => {
 };
 
 const rules = {
-  name: [{ validator: (val: any) => val === 8, message: '只能输入8个字符英文' }],
-  password: [{ validator: (val: any) => val > 6, message: '长度大于6个字符' }],
+  name: [{ validator: (val: any) => val.length === 8, message: '只能输入8个字符英文' }],
+  password: [{ validator: (val: any) => val.length > 6, message: '长度大于6个字符' }],
   gender: [{ validator: (val: any) => val !== '', message: '不能为空' }],
   birth: [{ validator: (val: any) => val !== '', message: '不能为空' }],
   place: [{ validator: (val: any) => val !== '', message: '不能为空' }],

diff --git a/src/form/form.vue b/src/form/form.vue
@@ -8,6 +8,7 @@
 import { computed, defineComponent, provide, reactive, ref, toRefs } from 'vue';
 import isEmpty from 'lodash/isEmpty';
 import isArray from 'lodash/isArray';
+import isBoolean from 'lodash/isBoolean';
 import isFunction from 'lodash/isFunction';
 import {
   Data,
@@ -117,14 +118,22 @@ export default defineComponent({
       return result;
     };
 
+    const getFirstError = (r: Result) => {
+      if (isBoolean(r)) return '';
+      return r?.[Object.keys(r)?.[0]]?.[0]?.message || '';
+    };
     const submitParams = ref<Pick<FormValidateParams, 'showErrorMessage'>>();
     const onSubmit = (e?: FormSubmitEvent) => {
       if (props.preventSubmitDefault && e) {
         preventDefault(e, true);
       }
       validate(submitParams.value).then((r) => {
+        const firstError = getFirstError(r);
         // @ts-ignore
-        props.onSubmit?.({ validateResult: r });
+        props.onSubmit?.({
+          validateResult: r,
+          firstError,
+        });
       });
       submitParams.value = undefined;
     };