fix(form): fix form verification and console error message issues

Author: anncwb

CHANGELOG.zh_CN.md

@@ -23,6 +23,7 @@
 
 - 修复 tree 文本超出挡住操作按钮问题
 - 修复通过 useRedo 刷新页面参数丢失问题
+- 修复表单校验先设置在校验及控制台错误信息问题
 
 ### 🎫 Chores
 

src/components/Form/src/BasicForm.vue

@@ -71,17 +71,17 @@
       const schemaRef = ref<Nullable<FormSchema[]>>(null);
       const formElRef = ref<Nullable<FormActionType>>(null);
 
-      const getRowWrapStyleRef = computed((): any => {
-        const { baseRowStyle } = unref(getProps);
-        return baseRowStyle || {};
-      });
-
       const getMergePropsRef = computed(
         (): FormProps => {
           return deepMerge(cloneDeep(props), unref(propsRef));
         }
       );
 
+      const getRowWrapStyleRef = computed((): any => {
+        const { baseRowStyle } = unref(getMergePropsRef);
+        return baseRowStyle || {};
+      });
+
       // 获取表单基本配置
       const getProps = computed(
         (): FormProps => {
@@ -103,7 +103,7 @@
         const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
         for (const schema of schemas) {
           const { defaultValue, component } = schema;
-          if (defaultValue && dateItemType.includes(component!)) {
+          if (defaultValue && dateItemType.includes(component)) {
             if (!Array.isArray(defaultValue)) {
               schema.defaultValue = moment(defaultValue);
             } else {

src/components/Form/src/FormItem.tsx

@@ -17,6 +17,7 @@ import { upperFirst, cloneDeep } from 'lodash-es';
 import { useItemLabelWidth } from './hooks/useLabelWidth';
 import { ComponentType } from './types';
 import { isNumber } from '/@/utils/is';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 export default defineComponent({
   name: 'BasicFormItem',
@@ -46,6 +47,8 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
+    const { t } = useI18n('component.form');
+    // @ts-ignore
     const itemLabelWidthRef = useItemLabelWidth(toRef(props, 'schema'), toRef(props, 'formProps'));
 
     const getValuesRef = computed(() => {
@@ -132,7 +135,7 @@ export default defineComponent({
       let rules: ValidationRule[] = cloneDeep(defRules) as ValidationRule[];
 
       if ((!rules || rules.length === 0) && required) {
-        rules = [{ required }];
+        rules = [{ required, type: 'string' }];
       }
 
       const requiredRuleIndex: number = rules.findIndex(
@@ -142,6 +145,9 @@ export default defineComponent({
       if (requiredRuleIndex !== -1) {
         const rule = rules[requiredRuleIndex];
         if (rule.required && component) {
+          if (!Reflect.has(rule, 'type')) {
+            rule.type = 'string';
+          }
           const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
             ? rulesMessageJoinLabel
             : globalRulesMessageJoinLabel;
@@ -157,11 +163,9 @@ export default defineComponent({
             component.includes('TimePicker')
           ) {
             rule.type = 'object';
-          }
-          if (component.includes('RangePicker') || component.includes('Upload')) {
+          } else if (component.includes('RangePicker') || component.includes('Upload')) {
             rule.type = 'array';
-          }
-          if (component.includes('InputNumber')) {
+          } else if (component.includes('InputNumber')) {
             rule.type = 'number';
           }
         }
@@ -171,7 +175,7 @@ export default defineComponent({
       const characterInx = rules.findIndex((val) => val.max);
       if (characterInx !== -1 && !rules[characterInx].validator) {
         rules[characterInx].message =
-          rules[characterInx].message || `字符数应小于${rules[characterInx].max}位`;
+          rules[characterInx].message || t('maxTip', [rules[characterInx].max]);
       }
       return rules;
     }
@@ -237,6 +241,7 @@ export default defineComponent({
       const bindValue = {
         [valueField || (isCheck ? 'checked' : 'value')]: handleValue(component, field),
       };
+
       if (!renderComponentContent) {
         return <Comp {...propsData} {...on} {...bindValue} />;
       }

src/components/Form/src/hooks/useFormAction.ts

@@ -79,9 +79,7 @@ export function useFormAction({
         validKeys.push(key);
       }
     });
-    // if (formEl) {
-    //   formEl.validateFields(validKeys);
-    // }
+    validateFields(validKeys);
   }
   /**
    * @description: Delete based on field name

src/components/Form/src/hooks/useFormValues.ts

@@ -19,11 +19,11 @@ export function useFormValues({
   formModel,
 }: UseFormValuesContext) {
   // Processing form values
-  function handleFormValues(values: any) {
+  function handleFormValues(values: Record<string, any>) {
     if (!isObject(values)) {
       return {};
     }
-    const resMap: any = {};
+    const resMap: Record<string, any> = {};
     for (const item of Object.entries(values)) {
       let [, value] = item;
       const [key] = item;
@@ -49,7 +49,7 @@ export function useFormValues({
   /**
    * @description: Processing time interval parameters
    */
-  function handleRangeTimeValue(values: any) {
+  function handleRangeTimeValue(values: Record<string, any>) {
     const fieldMapToTime = unref(fieldMapToTimeRef);
 
     if (!fieldMapToTime || !Array.isArray(fieldMapToTime)) {
@@ -72,7 +72,7 @@ export function useFormValues({
 
   function initDefault() {
     const schemas = unref(getSchema);
-    const obj: any = {};
+    const obj: Record<string, any> = {};
     schemas.forEach((item) => {
       if (item.defaultValue) {
         obj[item.field] = item.defaultValue;

src/locales/lang/en/component/form.ts

@@ -6,4 +6,6 @@ export default {
 
   input: 'Please Input',
   choose: 'Please Choose',
+
+  maxTip: 'The number of characters should be less than {0}',
 };

src/locales/lang/zh_CN/component/form.ts

@@ -6,4 +6,6 @@ export default {
 
   input: '请输入',
   choose: '请选择',
+
+  maxTip: '字符数应小于{0}位',
 };