feat: support validate on form item

NetEase · May 8, 2024 · c1054ea · c1054ea
1 parent f64d178
commit c1054ea
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/helpers/src/types/prototype.ts b/packages/helpers/src/types/prototype.ts
@@ -19,6 +19,15 @@ export type ComponentDndRulesType = IComponentDndRules;
  */
 export type ComponentPrototypeType = IComponentPrototype;
 
+/**
+ * 组件校验规则
+ */
+export type ComponentPropValidate = (
+  value: string,
+  field: any,
+  trigger: string,
+) => string | Promise<string>;
+
 /**
  * 组件属性类型
  */
@@ -107,6 +116,10 @@ export interface IComponentProp<T = any> {
    * 动态设置表单项是否展示
    */
   getVisible?: (form: any) => boolean;
+  /**
+   * 表单值校验逻辑
+   */
+  validate?: ComponentPropValidate;
   /**
    * 标记属性是否已废弃
    */

diff --git a/packages/setting-form/src/form-item.tsx b/packages/setting-form/src/form-item.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { clone, IComponentProp, useBoolean } from '@music163/tango-helpers';
+import { clone, ComponentPropValidate, IComponentProp, useBoolean } from '@music163/tango-helpers';
 import { isWrappedByExpressionContainer } from '@music163/tango-core';
 import { ToggleButton, CodeOutlined } from '@music163/tango-ui';
 import { InputProps } from 'antd';
@@ -58,7 +58,7 @@ export interface IFormItemCreateOptions {
   /**
    * 默认的表单值校验逻辑
    */
-  validate?: (value: string) => string | Promise<any>;
+  validate?: ComponentPropValidate;
 }
 
 const defaultGetSetterProps = () => ({});
@@ -86,6 +86,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     extra,
     footer,
     noStyle,
+    validate,
   }: FormItemProps) {
     const { disableSwitchExpressionSetter, showItemSubtitle } = useFormVariable();
     const model = useFormModel();
@@ -99,7 +100,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     const setterName = isVariable ? 'expressionSetter' : setter;
 
     field.setConfig({
-      validate: options.validate,
+      validate: validate || options.validate,
     });
 
     const baseComponentProps = clone(