@tmagic/form 1.8.0-beta.11 → 1.8.0-beta.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.11",
+  "version": "1.8.0-beta.12",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -50,11 +50,11 @@
     "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.38",
+    "vue": "^3.5.40",
     "typescript": "^6.0.3",
-    "@tmagic/form-schema": "1.8.0-beta.11",
-    "@tmagic/design": "1.8.0-beta.11",
-    "@tmagic/utils": "1.8.0-beta.11"
+    "@tmagic/design": "1.8.0-beta.12",
+    "@tmagic/utils": "1.8.0-beta.12",
+    "@tmagic/form-schema": "1.8.0-beta.12"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { provide, reactive, ref, shallowRef, toRaw, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, nextTick, provide, reactive, ref, shallowRef, toRaw, useTemplateRef, watch, watchEffect } from 'vue';
 import { cloneDeep, isEqual } from 'lodash-es';
 
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
@@ -50,7 +50,7 @@ import type {
   FormValue,
   ValidateError,
 } from './schema';
-import { FORM_DIFF_CONFIG_KEY } from './schema';
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from './schema';
 
 defineOptions({
   name: 'MForm',
@@ -70,6 +70,8 @@ const props = withDefaults(
     isCompare?: boolean;
     parentValues?: Record<string, any>;
     labelWidth?: string;
+    /** 是否开启类型匹配校验 */
+    typeMatchValid?: boolean;
     disabled?: boolean;
     height?: string;
     stepActive?: string | number;
@@ -134,6 +136,11 @@ const props = withDefaults(
 
 const emit = defineEmits(['change', 'error', 'field-input', 'field-change', 'update:stepActive']);
 
+provide(
+  FORM_TYPE_MATCH_VALID_KEY,
+  computed(() => props.typeMatchValid),
+);
+
 const tMagicFormRef = useTemplateRef('tMagicForm');
 const initialized = ref(false);
 const values = ref<FormValue>({});
@@ -280,6 +287,10 @@ watch(
       values.value = value;
       // 非对比模式，初始化完成
       initialized.value = !props.isCompare;
+
+      nextTick(() => {
+        tMagicFormRef.value?.validate();
+      });
     });
 
     if (props.isCompare) {
@@ -360,6 +371,27 @@ const getTextByName = (name: string, config: FormConfig = props.config): string
   return findInConfig(config, nameParts);
 };
 
+/**
+ * 将校验返回的 invalidFields 汇总为可读的错误文案（多条以 `<br>` 拼接）。
+ *
+ * 抽离为独立方法，供 `submitForm`（提交校验）与 `validate`（返回错误文案的校验）复用，
+ * 保证两种校验入口产出的错误文案格式完全一致。
+ */
+const formatValidateError = (invalidFields: Record<string, any>): string => {
+  const error: string[] = [];
+
+  Object.entries(invalidFields).forEach(([prop, validateError]) => {
+    (validateError as ValidateError[]).forEach(({ field, message }) => {
+      const name = field || prop;
+      const text = (props.useFieldTextInError ? getTextByName(name, props.config) : undefined) || name;
+
+      error.push(`${text} -> ${message}`);
+    });
+  });
+
+  return error.join('<br>');
+};
+
 defineExpose({
   values,
   lastValuesProcessed,
@@ -387,18 +419,36 @@ defineExpose({
     } catch (invalidFields: any) {
       emit('error', invalidFields);
 
-      const error: string[] = [];
-
-      Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
-        (ValidateError as ValidateError[]).forEach(({ field, message }) => {
-          const name = field || prop;
-          const text = (props.useFieldTextInError ? getTextByName(name, props.config) : undefined) || name;
-
-          error.push(`${text} -> ${message}`);
-        });
-      });
+      throw new Error(formatValidateError(invalidFields));
+    }
+  },
 
-      throw new Error(error.join('<br>'));
+  /**
+   * 校验：对表单当前值执行校验，返回汇总后的错误文案。
+   *
+   * 与 `submitForm` 的区别：
+   * - 校验失败时不抛异常、不触发 `error` 事件，而是以返回值形式给出错误文案；
+   * - 不重置 `changeRecords`，不改变提交语义，仅用于「探测」当前配置是否合法。
+   *
+   * 注意：本方法只改变「校验结果的返回方式」，并不负责「不污染页面表单状态」——
+   * 若需对一份独立的「配置 + 值」做完全不影响页面上已渲染表单的校验，请使用 `validateForm`
+   * （内部会新建一个隐藏的 MForm 实例，通过 `initValues` 传入待校验值，用完即卸载）。
+   *
+   * 典型用途：作为 `validateForm` 内部复用的校验实现；也可在已渲染的表单实例上主动调用，
+   * 根据返回的错误文案自行决定后续处理（如记录节点错误状态）。
+   *
+   * @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
+   */
+  validate: async (): Promise<string> => {
+    try {
+      const result = await tMagicFormRef.value?.validate();
+      // tdesign 通过返回值返回校验结果，element-plus 通过 throw error
+      if (result !== true) {
+        throw result;
+      }
+      return '';
+    } catch (invalidFields: any) {
+      return formatValidateError(invalidFields);
     }
   },
 

package/src/FormBox.vue

@@ -15,6 +15,7 @@
           :prevent-submit-default="preventSubmitDefault"
           :use-field-text-in-error="useFieldTextInError"
           :extend-state="extendState"
+          :type-match-valid="typeMatchValid"
           @change="changeHandler"
         ></Form>
         <slot></slot>
@@ -56,6 +57,8 @@ const props = withDefaults(
     width?: number;
     height?: number;
     labelWidth?: string;
+    /** 是否开启类型匹配校验 */
+    typeMatchValid?: boolean;
     disabled?: boolean;
     size?: 'small' | 'default' | 'large';
     confirmText?: string;

package/src/FormDialog.vue

@@ -32,6 +32,7 @@
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
         :use-field-text-in-error="useFieldTextInError"
+        :type-match-valid="typeMatchValid"
         :extend-state="extendState"
         @change="changeHandler"
       ></Form>
@@ -83,6 +84,8 @@ const props = withDefaults(
     parentValues?: Object;
     width?: string | number;
     labelWidth?: string;
+    /** 是否开启类型匹配校验 */
+    typeMatchValid?: boolean;
     fullscreen?: boolean;
     disabled?: boolean;
     title?: string;

package/src/FormDrawer.vue

@@ -29,6 +29,7 @@
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
         :use-field-text-in-error="useFieldTextInError"
+        :type-match-valid="typeMatchValid"
         :extend-state="extendState"
         @change="changeHandler"
       ></Form>
@@ -74,6 +75,8 @@ withDefaults(
     parentValues?: Object;
     width?: string | number;
     labelWidth?: string;
+    /** 是否开启类型匹配校验 */
+    typeMatchValid?: boolean;
     disabled?: boolean;
     closeOnPressEscape?: boolean;
     title?: string;

package/src/containers/Container.vue

@@ -249,7 +249,7 @@ import type {
   FormValue,
   ToolTipConfigType,
 } from '../schema';
-import { FORM_DIFF_CONFIG_KEY } from '../schema';
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from '../schema';
 import { getField } from '../utils/config';
 import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
 
@@ -296,6 +296,8 @@ const mForm = inject<FormState | undefined>('mForm');
 // 对比相关配置由 MForm 通过 provide 下发，这里直接 inject，无需逐层透传 prop。
 const diffConfig = inject<FormDiffConfig>(FORM_DIFF_CONFIG_KEY, {});
 
+const typeMatchValid = inject(FORM_TYPE_MATCH_VALID_KEY);
+
 const expand = ref(false);
 
 const name = computed(() => props.config.name || '');
@@ -411,7 +413,7 @@ const tooltip = computed(() => {
   };
 });
 
-const rule = computed(() => getRules(mForm, props.config.rules, props));
+const rule = computed(() => getRules(mForm, props.config.rules, props, typeMatchValid));
 
 const display = computed((): boolean => {
   const value = displayFunction(mForm, props.config.display, props);

package/src/fields/RadioGroup.vue

@@ -36,6 +36,9 @@ const itemComponent = computed(() => (props.config.childType === 'button' ? TMag
 const emit = defineEmits(['change']);
 
 const clickHandler = (item: string | number | boolean) => {
+  if (props.disabled) {
+    return;
+  }
   // 再次点击取消选中
   emit('change', props.model[props.name] === item ? '' : item);
 };

package/src/index.ts

@@ -63,6 +63,17 @@ export {
   registerField as registerFormField,
 } from './utils/config';
 
+export {
+  clearTypeMatchRules,
+  deleteTypeMatchRule,
+  getTypeMatchRule,
+  registerTypeMatchRule,
+  registerTypeMatchRules,
+  validateTypeMatch,
+} from './utils/typeMatch';
+
+export type { TypeMatchValidateContext, TypeMatchValidator } from './utils/typeMatch';
+
 export type { FormInstallOptions } from './plugin';
 
 export const createForm = <T extends [] = []>(config: FormConfig | T) => config;

package/src/plugin.ts

@@ -47,14 +47,19 @@ import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
 import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
+import { registerTypeMatchRules, type TypeMatchValidator } from './utils/typeMatch';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
 
 import './theme/index.scss';
 
+// #region FormInstallOptions
 export interface FormInstallOptions {
+  /** 自定义字段 type 的 typeMatch 校验规则，可覆盖内置规则或扩展业务字段 */
+  typeMatchRules?: Record<string, TypeMatchValidator>;
   [key: string]: any;
 }
+// #endregion FormInstallOptions
 
 const defaultInstallOpt: FormInstallOptions = {};
 
@@ -65,6 +70,10 @@ export default {
     app.config.globalProperties.$MAGIC_FORM = option;
     setConfig(option);
 
+    if (option.typeMatchRules) {
+      registerTypeMatchRules(option.typeMatchRules);
+    }
+
     app.component('m-form', Form);
     app.component('m-form-dialog', FormDialog);
     app.component('m-form-container', Container);

package/src/schema.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey } from 'vue';
 
 import type { FormItemConfig } from '@tmagic/form-schema';
 
@@ -27,6 +27,7 @@ export interface FormDiffConfig {
 }
 
 export const FORM_DIFF_CONFIG_KEY: InjectionKey<FormDiffConfig> = Symbol('mFormDiffConfig');
+export const FORM_TYPE_MATCH_VALID_KEY: InjectionKey<ComputedRef<boolean>> = Symbol('mFormTypeMatchValid');
 
 export interface ValidateError {
   message: string;