@tmagic/form 1.8.0-beta.17 → 1.8.0-beta.18

package/dist/es/utils/form.js

@@ -20,15 +20,16 @@ var adaptFormValidator = (validator) => {
 			const callback = (error) => {
 				if (settled) return;
 				settled = true;
-				if (error) resolve({
+				const first = Array.isArray(error) ? error[0] : error;
+				if (first) resolve({
 					result: false,
-					message: typeof error === "string" ? error : error.message
+					message: typeof first === "string" ? first : first.message
 				});
 				else resolve(true);
 			};
 			try {
 				const result = validator(void 0, value, callback);
-				if (result !== null && typeof result.then === "function") Promise.resolve(result).then(() => {
+				if (result && typeof result.then === "function") Promise.resolve(result).then(() => {
 					if (!settled) callback();
 				}, (err) => {
 					callback(err instanceof Error ? err : new Error(String(err)));

package/dist/es/utils/typeMatch.js

@@ -361,6 +361,11 @@ var validateBuiltinTypeMatch = (value, fieldType, mForm, props, message) => {
 		return;
 	}
 };
+/**
+* 校验取值与字段 type 是否匹配；通过返回 undefined，否则返回错误文案。
+*
+* 命中的自定义规则是异步校验器时返回 Promise，内置规则始终同步返回。
+*/
 var validateTypeMatch = (value, mForm, props, message) => {
 	if (isEmptyValue(value) || isEmptyArray(value)) return;
 	if (!props.config?.name) return;
@@ -376,34 +381,106 @@ var validateTypeMatch = (value, mForm, props, message) => {
 	});
 	return validateBuiltinTypeMatch(value, fieldType, mForm, props, message);
 };
+var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error(`${error}`);
 var createTypeMatchValidator = (mForm, props, rule) => {
 	const originalValidator = typeof rule.validator === "function" ? rule.validator : void 0;
+	/**
+	* 每次校验取一个自增序号，只有最新一轮的结论会被采用。
+	*
+	* 旧值的在途校验不能用自己的结论结算：它可能晚于新校验结束，用过期结论覆盖新结论
+	* （表单取最后结束的那次结果）；也不能在新校验开始时无条件按通过结算，否则
+	* `form.validate()` 会对一个还没校验过的值返回成功。因此所有尚未结算的调用都登记在
+	* pendingSettlers 中，等最新一轮出结论后用同一个结论一起结算。
+	*
+	* 不比较取值本身：配了 names 或取值为对象/数组时拿到的是同一个引用，就地修改后比较不出变化。
+	*/
+	let generation = 0;
+	let pendingSettlers = [];
 	return (asyncValidatorRule, value, callback, source, options) => {
 		const actualValue = props.config?.names ? props.model : value;
-		try {
-			const error = validateTypeMatch(actualValue, mForm, props, rule.message);
-			if (error) {
-				callback(new Error(error));
+		generation += 1;
+		const currentGeneration = generation;
+		/** 已有更新的一轮校验开始，本轮结论作废 */
+		const isStale = () => currentGeneration !== generation;
+		pendingSettlers.push((args) => callback(...args));
+		/**
+		* 结算本轮与被本轮取代的所有在途校验。
+		*
+		* async-validator 的 callback 不幂等：重复调用会让它的内部计数提前满足、错误信息重复；
+		* 原始 validator 写成 async 时很容易既调 callback 又返回 Promise，故所有回调都收敛到这里，
+		* 由「取出即出队」保证每个调用的 callback 只会被调用一次。
+		*/
+		const conclude = (...args) => {
+			if (isStale()) return;
+			const settlers = pendingSettlers;
+			pendingSettlers = [];
+			for (const settle of settlers) settle(args);
+		};
+		/**
+		* 执行原始 validator 并把结果统一转成 callback。
+		*
+		* async-validator 只解析同步返回给它的返回值（true / false / Error / 错误数组 / Promise，
+		* 抛错转成错误信息），异步路径已脱离它的调用栈，这些约定会失效导致校验永不结束，故复刻一份。
+		*/
+		const settleWithOriginalValidator = () => {
+			if (isStale()) return;
+			if (!originalValidator) {
+				conclude();
+				return;
+			}
+			let result;
+			try {
+				result = originalValidator({
+					rule: asyncValidatorRule,
+					value: actualValue,
+					callback: conclude,
+					source,
+					options
+				}, {
+					values: mForm?.initValues || {},
+					model: props.model,
+					parent: mForm?.parentValues || {},
+					formValue: mForm?.values || props.model,
+					prop: props.prop,
+					config: props.config
+				}, mForm);
+			} catch (err) {
+				conclude(toError(err));
 				return;
 			}
-		} catch (error) {
-			console.error(error);
+			if (isPromise(result)) result.then(() => conclude(), (err) => conclude(toError(err)));
+			else if (result === true) conclude();
+			else if (result === false) {
+				const field = asyncValidatorRule?.fullField || asyncValidatorRule?.field || props.prop;
+				conclude(new Error(rule.message || `${field} fails`));
+			} else if (result instanceof Error || Array.isArray(result)) conclude(result);
+		};
+		const skipFailedTypeMatch = (err) => {
+			console.error(err);
+			settleWithOriginalValidator();
+		};
+		let error;
+		try {
+			error = validateTypeMatch(actualValue, mForm, props, rule.message);
+		} catch (err) {
+			skipFailedTypeMatch(err);
+			return;
+		}
+		if (isPromise(error)) {
+			error.then((asyncMessage) => {
+				if (asyncMessage) {
+					conclude(new Error(asyncMessage));
+					return;
+				}
+				settleWithOriginalValidator();
+			}, skipFailedTypeMatch);
+			return;
+		}
+		if (error) {
+			conclude(new Error(error));
+			return;
 		}
-		if (originalValidator) return originalValidator({
-			rule: asyncValidatorRule,
-			value: actualValue,
-			callback,
-			source,
-			options
-		}, {
-			values: mForm?.initValues || {},
-			model: props.model,
-			parent: mForm?.parentValues || {},
-			formValue: mForm?.values || props.model,
-			prop: props.prop,
-			config: props.config
-		}, mForm);
-		callback();
+		settleWithOriginalValidator();
 	};
 };
 //#endregion

package/dist/tmagic-form.umd.cjs

@@ -3088,6 +3088,11 @@
 			return;
 		}
 	};
+	/**
+	* 校验取值与字段 type 是否匹配；通过返回 undefined，否则返回错误文案。
+	*
+	* 命中的自定义规则是异步校验器时返回 Promise，内置规则始终同步返回。
+	*/
 	var validateTypeMatch = (value, mForm, props, message) => {
 		if (isEmptyValue(value) || isEmptyArray(value)) return;
 		if (!props.config?.name) return;
@@ -3103,34 +3108,106 @@
 		});
 		return validateBuiltinTypeMatch(value, fieldType, mForm, props, message);
 	};
+	var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error(`${error}`);
 	var createTypeMatchValidator = (mForm, props, rule) => {
 		const originalValidator = typeof rule.validator === "function" ? rule.validator : void 0;
+		/**
+		* 每次校验取一个自增序号，只有最新一轮的结论会被采用。
+		*
+		* 旧值的在途校验不能用自己的结论结算：它可能晚于新校验结束，用过期结论覆盖新结论
+		* （表单取最后结束的那次结果）；也不能在新校验开始时无条件按通过结算，否则
+		* `form.validate()` 会对一个还没校验过的值返回成功。因此所有尚未结算的调用都登记在
+		* pendingSettlers 中，等最新一轮出结论后用同一个结论一起结算。
+		*
+		* 不比较取值本身：配了 names 或取值为对象/数组时拿到的是同一个引用，就地修改后比较不出变化。
+		*/
+		let generation = 0;
+		let pendingSettlers = [];
 		return (asyncValidatorRule, value, callback, source, options) => {
 			const actualValue = props.config?.names ? props.model : value;
-			try {
-				const error = validateTypeMatch(actualValue, mForm, props, rule.message);
-				if (error) {
-					callback(new Error(error));
+			generation += 1;
+			const currentGeneration = generation;
+			/** 已有更新的一轮校验开始，本轮结论作废 */
+			const isStale = () => currentGeneration !== generation;
+			pendingSettlers.push((args) => callback(...args));
+			/**
+			* 结算本轮与被本轮取代的所有在途校验。
+			*
+			* async-validator 的 callback 不幂等：重复调用会让它的内部计数提前满足、错误信息重复；
+			* 原始 validator 写成 async 时很容易既调 callback 又返回 Promise，故所有回调都收敛到这里，
+			* 由「取出即出队」保证每个调用的 callback 只会被调用一次。
+			*/
+			const conclude = (...args) => {
+				if (isStale()) return;
+				const settlers = pendingSettlers;
+				pendingSettlers = [];
+				for (const settle of settlers) settle(args);
+			};
+			/**
+			* 执行原始 validator 并把结果统一转成 callback。
+			*
+			* async-validator 只解析同步返回给它的返回值（true / false / Error / 错误数组 / Promise，
+			* 抛错转成错误信息），异步路径已脱离它的调用栈，这些约定会失效导致校验永不结束，故复刻一份。
+			*/
+			const settleWithOriginalValidator = () => {
+				if (isStale()) return;
+				if (!originalValidator) {
+					conclude();
+					return;
+				}
+				let result;
+				try {
+					result = originalValidator({
+						rule: asyncValidatorRule,
+						value: actualValue,
+						callback: conclude,
+						source,
+						options
+					}, {
+						values: mForm?.initValues || {},
+						model: props.model,
+						parent: mForm?.parentValues || {},
+						formValue: mForm?.values || props.model,
+						prop: props.prop,
+						config: props.config
+					}, mForm);
+				} catch (err) {
+					conclude(toError(err));
 					return;
 				}
-			} catch (error) {
-				console.error(error);
+				if (isPromise(result)) result.then(() => conclude(), (err) => conclude(toError(err)));
+				else if (result === true) conclude();
+				else if (result === false) {
+					const field = asyncValidatorRule?.fullField || asyncValidatorRule?.field || props.prop;
+					conclude(new Error(rule.message || `${field} fails`));
+				} else if (result instanceof Error || Array.isArray(result)) conclude(result);
+			};
+			const skipFailedTypeMatch = (err) => {
+				console.error(err);
+				settleWithOriginalValidator();
+			};
+			let error;
+			try {
+				error = validateTypeMatch(actualValue, mForm, props, rule.message);
+			} catch (err) {
+				skipFailedTypeMatch(err);
+				return;
 			}
-			if (originalValidator) return originalValidator({
-				rule: asyncValidatorRule,
-				value: actualValue,
-				callback,
-				source,
-				options
-			}, {
-				values: mForm?.initValues || {},
-				model: props.model,
-				parent: mForm?.parentValues || {},
-				formValue: mForm?.values || props.model,
-				prop: props.prop,
-				config: props.config
-			}, mForm);
-			callback();
+			if (isPromise(error)) {
+				error.then((asyncMessage) => {
+					if (asyncMessage) {
+						conclude(new Error(asyncMessage));
+						return;
+					}
+					settleWithOriginalValidator();
+				}, skipFailedTypeMatch);
+				return;
+			}
+			if (error) {
+				conclude(new Error(error));
+				return;
+			}
+			settleWithOriginalValidator();
 		};
 	};
 	//#endregion
@@ -3149,15 +3226,16 @@
 				const callback = (error) => {
 					if (settled) return;
 					settled = true;
-					if (error) resolve({
+					const first = Array.isArray(error) ? error[0] : error;
+					if (first) resolve({
 						result: false,
-						message: typeof error === "string" ? error : error.message
+						message: typeof first === "string" ? first : first.message
 					});
 					else resolve(true);
 				};
 				try {
 					const result = validator(void 0, value, callback);
-					if (result !== null && typeof result.then === "function") Promise.resolve(result).then(() => {
+					if (result && typeof result.then === "function") Promise.resolve(result).then(() => {
 						if (!settled) callback();
 					}, (err) => {
 						callback(err instanceof Error ? err : new Error(String(err)));

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.17",
+  "version": "1.8.0-beta.18",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.40",
     "typescript": "^6.0.3",
-    "@tmagic/design": "1.8.0-beta.17",
-    "@tmagic/utils": "1.8.0-beta.17",
-    "@tmagic/form-schema": "1.8.0-beta.17"
+    "@tmagic/design": "1.8.0-beta.18",
+    "@tmagic/utils": "1.8.0-beta.18",
+    "@tmagic/form-schema": "1.8.0-beta.18"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/utils/form.ts

@@ -60,13 +60,15 @@ export const adaptFormValidator = (validator: AsyncValidatorFn): AsyncValidatorF
     const value = arg1;
     return new Promise((resolve) => {
       let settled = false;
-      const callback = (error?: Error | string) => {
+      const callback = (error?: Error | string | (Error | string)[]) => {
         if (settled) return;
         settled = true;
-        if (error) {
+        // async-validator 约定 callback 也可接收错误数组，TDesign 只能展示一条，取首条
+        const first = Array.isArray(error) ? error[0] : error;
+        if (first) {
           resolve({
             result: false,
-            message: typeof error === 'string' ? error : error.message,
+            message: typeof first === 'string' ? first : first.message,
           });
         } else {
           resolve(true);
@@ -74,8 +76,9 @@ export const adaptFormValidator = (validator: AsyncValidatorFn): AsyncValidatorF
       };
 
       try {
+        // 异步 validator 会先返回 undefined，稍后再调 callback，这里不能当成 thenable 取值
         const result = validator(undefined, value, callback);
-        if (result !== null && typeof (result as PromiseLike<unknown>).then === 'function') {
+        if (result && typeof (result as PromiseLike<unknown>).then === 'function') {
           Promise.resolve(result).then(
             () => {
               if (!settled) callback();

package/src/utils/typeMatch.ts

@@ -38,8 +38,15 @@ export interface TypeMatchValidateContext {
 // #endregion TypeMatchValidateContext
 
 // #region TypeMatchValidator
-/** 自定义 type 校验器：返回错误文案；通过则返回 undefined */
-export type TypeMatchValidator = (value: any, context: TypeMatchValidateContext) => string | undefined;
+/**
+ * 自定义 type 校验器：返回错误文案；通过则返回 undefined。
+ *
+ * 支持返回 Promise，用于需要异步确认取值是否合法的场景（如请求接口校验 id 是否存在）。
+ */
+export type TypeMatchValidator = (
+  value: any,
+  context: TypeMatchValidateContext,
+) => string | undefined | Promise<string | undefined>;
 // #endregion TypeMatchValidator
 
 const typeMatchRuleRegistry = new Map<string, TypeMatchValidator>();
@@ -692,12 +699,17 @@ const validateBuiltinTypeMatch = (
   return undefined;
 };
 
+/**
+ * 校验取值与字段 type 是否匹配；通过返回 undefined，否则返回错误文案。
+ *
+ * 命中的自定义规则是异步校验器时返回 Promise，内置规则始终同步返回。
+ */
 export const validateTypeMatch = (
   value: any,
   mForm: FormState | undefined,
   props: any,
   message?: string,
-): string | undefined => {
+): string | undefined | Promise<string | undefined> => {
   if (isEmptyValue(value) || isEmptyArray(value)) {
     return undefined;
   }
@@ -724,43 +736,135 @@ export const validateTypeMatch = (
   return validateBuiltinTypeMatch(value, fieldType, mForm, props, message);
 };
 
+const toError = (error: any): Error => (error instanceof Error ? error : new Error(`${error}`));
+
 export const createTypeMatchValidator = (mForm: FormState | undefined, props: any, rule: Rule) => {
   const originalValidator = typeof rule.validator === 'function' ? rule.validator : undefined;
 
+  /**
+   * 每次校验取一个自增序号，只有最新一轮的结论会被采用。
+   *
+   * 旧值的在途校验不能用自己的结论结算：它可能晚于新校验结束，用过期结论覆盖新结论
+   * （表单取最后结束的那次结果）；也不能在新校验开始时无条件按通过结算，否则
+   * `form.validate()` 会对一个还没校验过的值返回成功。因此所有尚未结算的调用都登记在
+   * pendingSettlers 中，等最新一轮出结论后用同一个结论一起结算。
+   *
+   * 不比较取值本身：配了 names 或取值为对象/数组时拿到的是同一个引用，就地修改后比较不出变化。
+   */
+  let generation = 0;
+  let pendingSettlers: ((args: any[]) => void)[] = [];
+
   return (asyncValidatorRule: any, value: any, callback: Function, source: any, options: any) => {
     const actualValue = props.config?.names ? props.model : value;
-    try {
-      const error = validateTypeMatch(actualValue, mForm, props, rule.message);
 
-      if (error) {
-        callback(new Error(error));
+    generation += 1;
+    const currentGeneration = generation;
+    /** 已有更新的一轮校验开始，本轮结论作废 */
+    const isStale = () => currentGeneration !== generation;
+
+    pendingSettlers.push((args: any[]) => callback(...args));
+
+    /**
+     * 结算本轮与被本轮取代的所有在途校验。
+     *
+     * async-validator 的 callback 不幂等：重复调用会让它的内部计数提前满足、错误信息重复；
+     * 原始 validator 写成 async 时很容易既调 callback 又返回 Promise，故所有回调都收敛到这里，
+     * 由「取出即出队」保证每个调用的 callback 只会被调用一次。
+     */
+    const conclude = (...args: any[]) => {
+      if (isStale()) {
         return;
       }
-    } catch (error) {
-      console.error(error);
-    }
-
-    if (originalValidator) {
-      return originalValidator(
-        {
-          rule: asyncValidatorRule,
-          value: actualValue,
-          callback,
-          source,
-          options,
-        },
-        {
-          values: mForm?.initValues || {},
-          model: props.model,
-          parent: mForm?.parentValues || {},
-          formValue: mForm?.values || props.model,
-          prop: props.prop,
-          config: props.config,
-        },
-        mForm,
-      );
+
+      const settlers = pendingSettlers;
+      pendingSettlers = [];
+      for (const settle of settlers) {
+        settle(args);
+      }
+    };
+
+    /**
+     * 执行原始 validator 并把结果统一转成 callback。
+     *
+     * async-validator 只解析同步返回给它的返回值（true / false / Error / 错误数组 / Promise，
+     * 抛错转成错误信息），异步路径已脱离它的调用栈，这些约定会失效导致校验永不结束，故复刻一份。
+     */
+    const settleWithOriginalValidator = () => {
+      // 本轮结论已作废，不必再跑一遍原始 validator 触发副作用
+      if (isStale()) {
+        return;
+      }
+
+      if (!originalValidator) {
+        conclude();
+        return;
+      }
+
+      let result: any;
+      try {
+        result = originalValidator(
+          { rule: asyncValidatorRule, value: actualValue, callback: conclude, source, options },
+          {
+            values: mForm?.initValues || {},
+            model: props.model,
+            parent: mForm?.parentValues || {},
+            formValue: mForm?.values || props.model,
+            prop: props.prop,
+            config: props.config,
+          },
+          mForm,
+        );
+      } catch (err) {
+        conclude(toError(err));
+        return;
+      }
+
+      if (isPromise(result)) {
+        result.then(
+          () => conclude(),
+          (err: any) => conclude(toError(err)),
+        );
+      } else if (result === true) {
+        conclude();
+      } else if (result === false) {
+        const field = asyncValidatorRule?.fullField || asyncValidatorRule?.field || props.prop;
+        conclude(new Error(rule.message || `${field} fails`));
+      } else if (result instanceof Error || Array.isArray(result)) {
+        conclude(result);
+      }
+      // 其余返回值（undefined / void）按约定由 validator 自行调用 callback
+    };
+
+    // 校验器自身失败（如接口异常）不应阻塞用户，记录后按通过处理
+    const skipFailedTypeMatch = (err: any) => {
+      console.error(err);
+      settleWithOriginalValidator();
+    };
+
+    let error: string | undefined | Promise<string | undefined>;
+    try {
+      error = validateTypeMatch(actualValue, mForm, props, rule.message);
+    } catch (err) {
+      skipFailedTypeMatch(err);
+      return;
+    }
+
+    if (isPromise(error)) {
+      error.then((asyncMessage) => {
+        if (asyncMessage) {
+          conclude(new Error(asyncMessage));
+          return;
+        }
+        settleWithOriginalValidator();
+      }, skipFailedTypeMatch);
+      return;
+    }
+
+    if (error) {
+      conclude(new Error(error));
+      return;
     }
 
-    callback();
+    settleWithOriginalValidator();
   };
 };

package/types/index.d.ts

@@ -2206,8 +2206,12 @@ interface TypeMatchValidateContext {
   props: any;
   message?: string;
 }
-/** 自定义 type 校验器：返回错误文案；通过则返回 undefined */
-type TypeMatchValidator = (value: any, context: TypeMatchValidateContext) => string | undefined;
+/**
+ * 自定义 type 校验器：返回错误文案；通过则返回 undefined。
+ *
+ * 支持返回 Promise，用于需要异步确认取值是否合法的场景（如请求接口校验 id 是否存在）。
+ */
+type TypeMatchValidator = (value: any, context: TypeMatchValidateContext) => string | undefined | Promise<string | undefined>;
 /** 注册或覆盖某个字段 type 的 typeMatch 校验规则 */
 declare const registerTypeMatchRule: (type: string, validator: TypeMatchValidator) => void;
 /** 批量注册 typeMatch 校验规则 */
@@ -2218,7 +2222,12 @@ declare const getTypeMatchRule: (type: string) => TypeMatchValidator | undefined
 declare const deleteTypeMatchRule: (type: string) => boolean;
 /** 清空所有自定义 typeMatch 校验规则 */
 declare const clearTypeMatchRules: () => void;
-declare const validateTypeMatch: (value: any, mForm: schema_d_exports.FormState | undefined, props: any, message?: string) => string | undefined;
+/**
+ * 校验取值与字段 type 是否匹配；通过返回 undefined，否则返回错误文案。
+ *
+ * 命中的自定义规则是异步校验器时返回 Promise，内置规则始终同步返回。
+ */
+declare const validateTypeMatch: (value: any, mForm: schema_d_exports.FormState | undefined, props: any, message?: string) => string | undefined | Promise<string | undefined>;
 //#endregion
 //#region temp/packages/form/src/plugin.d.ts
 interface FormInstallOptions {