From 1db72c8fe13384f24e9cc1bdc839d5e4176ea9b4 Mon Sep 17 00:00:00 2001 From: vben Date: Thu, 5 Nov 2020 00:26:46 +0800 Subject: [PATCH] fix: fix form validate error --- CHANGELOG.en_US.md | 25 +++++++++++++++++++ CHANGELOG.zh_CN.md | 3 ++- src/components/Form/src/BasicForm.vue | 25 ++++++++----------- src/components/Form/src/FormItem.tsx | 19 ++++++++------ .../Form/src/hooks/useFormAction.ts | 19 +++++++------- 5 files changed, 60 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.en_US.md b/CHANGELOG.en_US.md index fc360220..2e2828f9 100644 --- a/CHANGELOG.en_US.md +++ b/CHANGELOG.en_US.md @@ -1,3 +1,28 @@ +## 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 diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index a381952c..d2bc7dc1 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -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) diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index a0c14b4f..9128c8d6 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -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:设置表单 diff --git a/src/components/Form/src/FormItem.tsx b/src/components/Form/src/FormItem.tsx index 3a37de09..680fe14a 100644 --- a/src/components/Form/src/FormItem.tsx +++ b/src/components/Form/src/FormItem.tsx @@ -14,6 +14,8 @@ import { createPlaceholderMessage } from './helper'; 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 ; diff --git a/src/components/Form/src/hooks/useFormAction.ts b/src/components/Form/src/hooks/useFormAction.ts index f8eafda1..2a8ce0cb 100644 --- a/src/components/Form/src/hooks/useFormAction.ts +++ b/src/components/Form/src/hooks/useFormAction.ts @@ -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); } -- GitLab