fix: fix form validate error

vben
1 parent db0bfc88
Showing 5 changed files with 60 additions and 31 deletions
CHANGELOG.en_US.md
CHANGELOG.zh_CN.md
src/components/Form/src/BasicForm.vue
src/components/Form/src/FormItem.tsx
src/components/Form/src/hooks/useFormAction.ts
+## Wip
+
+### ⚡ Performance Improvements
+
+- Menu performance continues to be optimized and smoother
+- Optimize lazy loading components and examples
+
+### 🎫 Chores
+
+- Delete menu background image
+- Update the version of ʻant-design-vue`to`beta13`
+- Update `vite` version to `rc.9`
+- Exception page adjustment
+- `BasicTitle` Color blocks are not displayed by default
+
+### 🐛 Bug Fixes
+
+- Fix table type problem after upgrade
+- Fix the problem that the last submenu continues to be displayed when the menu is divided and there is no data in the left menu
+- Fix the issue of ʻuseMessage` type
+- Fix the problem that the form item setting `disabled` does not take effect
+- Fix that ʻuseECharts`can't adapt when`resize`, and an error is reported
+- Fix that `resize` is not deleted after ʻuseWatermark` is cleared
+- Fix form verification problem
+
 ## 2.0.0-rc.8 (2020-11-2)
 ### ✨ Features
@@ -11,7 +11,7 @@
 - 更新`ant-design-vue`版本为`beta13`
 - 更新`vite`版本为`rc.9`
 - 异常页调整
-- `BasicTitle` Color blocks are not displayed by default
+- `BasicTitle` 色块默认不显示
 ### 🐛 Bug Fixes
@@ -21,6 +21,7 @@
 - 修复表单项设置`disabled`不生效问题
 - 修复`useECharts`在`resize`时不能自适应,报错
 - 修复`useWatermark`在清空后`resize`未删除
+- 修复表单校验问题
 ## 2.0.0-rc.8 (2020-11-2)
@@ -28,16 +28,7 @@
   import type { Ref } from 'vue';
   import type { ValidateFields } from 'ant-design-vue/lib/form/interface';
-  import {
-    defineComponent,
-    reactive,
-    ref,
-    computed,
-    unref,
-    toRef,
-    onMounted,
-    watchEffect,
-  } from 'vue';
+  import { defineComponent, reactive, ref, computed, unref, toRef, onMounted, watch } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './FormItem';
   import { basicProps } from './props';
@@ -153,10 +144,16 @@
         actionState,
       });
-      watchEffect(() => {
-        if (!unref(getMergePropsRef).model) return;
-        setFieldsValue(unref(getMergePropsRef).model);
-      });
+      watch(
+        () => unref(getMergePropsRef).model,
+        () => {
+          if (!unref(getMergePropsRef).model) return;
+          setFieldsValue(unref(getMergePropsRef).model);
+        },
+        {
+          immediate: true,
+        }
+      );
       /**
        * @description:设置表单
@@ -14,6 +14,8 @@ import { createPlaceholderMessage } from &#39;./helper&#39;;
 import { upperFirst, cloneDeep } from 'lodash-es';
 import { useItemLabelWidth } from './hooks/useLabelWidth';
+import { ComponentType } from './types';
+import { isNumber } from '../../../utils/is';
 export default defineComponent({
   name: 'BasicFormItem',
@@ -145,6 +147,14 @@ export default defineComponent({
       return rules;
     }
+    function handleValue(component: ComponentType, field: string) {
+      const val = (props.formModel as any)[field];
+      if (['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(component)) {
+        return isNumber(val) && val ? `${val}` : val;
+      }
+      return val;
+    }
+
     function renderComponent() {
       const {
         componentProps,
@@ -162,11 +172,7 @@ export default defineComponent({
           if (propsData[eventKey]) {
             propsData[eventKey](e);
           }
-          if (e && e.target) {
-            (props.formModel as any)[field] = e.target.value;
-          } else {
-            (props.formModel as any)[field] = e;
-          }
+          (props.formModel as any)[field] = e && e.target ? e.target.value : e;
         },
       };
       const Comp = componentMap.get(component);
@@ -190,9 +196,8 @@ export default defineComponent({
       propsData.placeholder = placeholder;
       propsData.codeField = field;
       propsData.formValues = unref(getValuesRef);
-
       const bindValue = {
-        [isCheck ? 'checked' : 'value']: (props.formModel as any)[field],
+        [isCheck ? 'checked' : 'value']: handleValue(component, field),
       };
       if (!renderComponentContent) {
         return <Comp {...propsData} {...on} {...bindValue} />;
@@ -43,8 +43,6 @@ export function useFormAction({
     Object.keys(formModel).forEach((key) => {
       (formModel as any)[key] = defaultValueRef.value[key];
     });
-    // @ts-ignore
-    // TODO 官方组件库类型定义错误，可以不传参数
     formEl.clearValidate();
     emit('reset', toRaw(formModel));
     // return values;
@@ -58,10 +56,12 @@ export function useFormAction({
     const fields = unref(getSchema)
       .map((item) => item.field)
       .filter(Boolean);
-    const formEl = unref(formElRef);
+    // const formEl = unref(formElRef);
+
+    const validKeys: string[] = [];
     Object.keys(values).forEach((key) => {
       const element = values[key];
-      if (fields.includes(key) && element !== undefined && element !== null) {
+      if (element !== undefined && element !== null && fields.includes(key)) {
         // 时间
         if (itemIsDateType(key)) {
           if (Array.isArray(element)) {
@@ -76,11 +76,12 @@ export function useFormAction({
         } else {
           (formModel as any)[key] = element;
         }
-        if (formEl) {
-          formEl.validateFields([key]);
-        }
+        validKeys.push(key);
       }
     });
+    // if (formEl) {
+    //   formEl.validateFields(validKeys);
+    // }
   }
   /**
    * @description: 根据字段名删除
@@ -151,8 +152,8 @@ export function useFormAction({
     updateData.forEach((item) => {
       unref(getSchema).forEach((val) => {
         if (val.field === item.field) {
-          const newScheam = deepMerge(val, item);
-          schema.push(newScheam as FormSchema);
+          const newSchema = deepMerge(val, item);
+          schema.push(newSchema as FormSchema);
         } else {
           schema.push(val);
         }