Installations

npm install @schema-plugin-flow/sifo-mplg-form-antd-mobile

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.16.0

NPM Version

lerna/3.22.1/node@v16.16.0+arm64 (darwin)

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

1

Total

10

Closed

9

Releases

Unable to fetch releases

Languages

7

JavaScript

TypeScript

Vue

Less

CSS

HTML

SCSS

JavaScript (66.95%)

TypeScript (21.61%)

Vue (6.88%)

Less (3.74%)

CSS (0.32%)

HTML (0.26%)

SCSS (0.25%)

Developer

alibaba

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

424 Stars

194 Commits

51 Forks

16 Watchers

1 Branches

3 Contributors

Updated on Apr 15, 2025

Maintainers

1

View All 3 Contributors

Package Meta Information

Latest Version

1.3.1

Package Id

@schema-plugin-flow/sifo-mplg-form-antd-mobile@1.3.1

Unpacked Size

133.32 kB

Size

27.88 kB

File Count

53

NPM Version

lerna/3.22.1/node@v16.16.0+arm64 (darwin)

Node Version

16.16.0

Published on

Jan 16, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

8

@babel/runtime antd-mobile antd-mobile-icons classnames dayjs prop-types react react-dom

Dev Dependencies

13

@babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/preset-env @babel/preset-typescript @babel/register @schema-plugin-flow/sifo-react chai chai-enzyme eslint husky mocha

AdmFormModelPlugin

sifo Form with ant-design-mobile. (base 375px)

AdmFormModelPlugin 是在 SifoFormCore (@schema-plugin-flow/sifo-mplg-form-core) 基础上封装的UI层. mApi 同 SifoFormCore。

类实例化参数

参数名	参数类型	描述	默认值
formItemWrapper	(component)=>formItemWrapper	对传入的components进行封装。结合SifoFormCore 封装的 ant-design 下的 FormItem。可以自定义实现来满足需要的功能与特性	defaultFormItemWrapper
formItemProps	FormItemProps	统一设置 FormItem 的属性	{}

内置组件

Cascader 级联
CascaderPicker 异步级联
Button 按钮
List
ListItem
Container 普通容器
Picker 选择器
ImageUploader 图片上传
Input 输入框
TextArea 多行文本
DatePicker 日期时间选择
DateRangePicker 日期范围选择
Checkbox 复选框
SplitPanel 分栏组件
Radio 单选框
NumberInput 数字输入框

使用示例

详细示例与代码请参照github -> docs/sifo-react-doc/form-demo

1import SifoFormCore from '@schema-plugin-flow/sifo-mplg-form-core';
2import AdmFormModelPlugin, { baseComponents }  from "@schema-plugin-flow/sifo-mplg-form-antd-mobile";
3import "@schema-plugin-flow/sifo-mplg-form-antd-mobile/index.less";
4// sifo plugins
5[{
6  modelPlugin: {
7    plugin: SifoFormCore,
8    argsProvider: (mId, info) => {
9      return {
10        // 字段的key，无返回值认为不是字段
11        fieldKey: (attr) => attr.name,
12        fieldChange: {
13          // 表单字段change使用的handler
14          changeHandler: (context, e) => {
15            const { event, mApi } = context;
16            // 可根据不同的组件进行值获取
17            let val = e;
18            if (typeof e === "string" || typeof e === "number") {
19              val = e;
20            } else if (e && typeof e === "object") {
21              val = e.target ? e.target.value : e;
22            }
23            mApi.setAttributes(event.key, { value: val }, true);
24          },
25          eventName: "onChange", // antd的字段组件事件名是 onChange
26        },
27      };
28    },
29  }
30},
31{
32  modelPlugin: AdmFormModelPlugin, // 要在SifoFormCore之后注册
33},
34/*
35* 传 formItemProps 参数用法
36  modelPlugin: {
37    plugin: AdmFormModelPlugin,
38    argsProvider: (mId, info) => {
39      return {
40        formItemProps: { labelAlign: 'left' }, // 使用左右布局
41      };
42    }
43  }
44*/
45{ pagePlugin, componentPlugin }
46]

formItemWrapper

SifoFormCore模型插件只有表单内核，不包含任何UI部分，UI可按各自的情形封装。

字段标识：在字段节点时，在schema节点层和attributes层都将包含属性__isField__: true；
value, validators, rules, validateDisabled, validateInfo 等放在 attributes 上；

schema 格式

将 value, rules 等放在 attributes 上；
schema 节点 id 应与 fieldKey（此处指字段标识对应的值）一致;
className 是字段组件的样式；itemClassName 是FormItem层的样式；
labelCol 控制FormItem标签; wrapperCol 控制FormItem字段组件;

1{
2  "component": "Form",
3  "id": "$form",
4  "attributes": {
5    "className": "stage-form-mobile-demo"
6  },
7  "children": [
8    {
9      "id": "fieldKey01",
10      "component": "Input",
11      "attributes": {
12        "name": "fieldKey01",
13        "label": "字段名",
14        "rules": [
15          {
16            "required": true,
17            "message": "你需要填写项目的名称",
18            "trigger": [
19              "onPressEnter",
20              "onChange"
21            ]
22          }
23        ],
24        "className": "test-control-class",
25        "itemClassName": "test-form-item-class",
26        "labelAlign": "left",
27      }
28    }
29  ]
30}

FormItem Props

参数	说明	类型	默认值
name	默认的字段标识key，不一定是“name”，可以是任意自定的key	string	-
label	字段标签名	string	-
hideLabel	隐藏字段标签	bool	false
rules	校验规则，见下文校验规则描述	array	-
labelAlign	标签对齐方式，默认上下对齐	top/left	top
itemVisible	字段是否可见，即 display: none	bool	true
itemClassName	FormItem 上的样式	string	-

FormItem 事件

参数	说明	类型	默认值
propsFormatter	转换字段的属性到组件属性	Function: (props: any) => any	-

校验规则描述

内置了必填、整数、最大最小值、长度和正则校验；
规则描述的 message 省略时将使用内置文案；
trigger 省略时将使用类实例参数 fieldChange 的 eventName，除非设置 notAutoTrigger = true，此时只在调用 validate、validateAll 时触发；
skipEmpty 跳过对空值的校验；
调用validate、validateAll 时不区分 trigger；

1{
2  "rules": [
3    {
4      "required": true,
5      "message": "请填写信息",
6      "trigger": [
7        "onPressEnter",
8        "onChange"
9      ]
10    },
11    {
12      "type": "integer",
13      "notAutoTrigger": false
14    },
15    {
16      "max": 99.9
17    },
18    {
19      "maxLength": 9
20    },
21    {
22      "regExp": "/^8(.)*/",
23      "message": "应以8开头",
24      "skipEmpty": true
25    }
26  ]
27}

扩展的 mApi 模型接口

方法名	参数/类型	返回值类型	描述
getFormItemProps	id	{ value, validators, rules, validateDisabled, validateInfo }	此方法应返回FormItem的属性，包含：value, validators, rules, validateDisabled, validateInfo 等，默认在attributes中取(即使用 getAttributes 方法)。后面的模型插件可覆盖此方法来适配相应情形。
setValue	(fieldKey, value)	-	设置指定字段的值
setValues	{ [fieldKey]: value }	-	设置多个字段值
getValue	fieldKey	any	获取指定字段值
getValues	✘	{ [fieldKey]: value }	获取所有字段值
setRules	(id, rules, setType = 'merge', refresh)	Promise	设置校验规则，默认用 merge 模式，用 replace 模式时，会完全替换成设置的规则
addValidator	(fieldKey, validatorItem)	-	为指定字段增加函数式校验器，要注意校验器的使用方法，见下面的validatorItem示例
removeValidator	(fieldKey, validatorItem)	-	移除函数式校验器
disableValidate	(fieldKey, disable = true)	-	设置校验（包含校验规则与校验函数）是否失效
validate	fieldKey	Promise< validateInfo: { passed, message }[] >	校验指定字段
validateAll	✘	Promise< { passed, details:{ id, fieldKey, validateInfo, passed }[] }[] >	校验所有字段
scrollIntoView	fieldKey	-	滚动到指定字段位置

validatorItem

1const validatorItem = {
2  validator: (value, callback, opts:{ id, mApi, fieldKey }) => {
3    // not passed
4    callback({
5    passed: false,
6    status: 'error',
7    message: 'invalidate message',
8    });
9    // passed
10    callback();
11  },
12  trigger: ['eventName'], // 在何时触发，默认是类实例参数 fieldChange 的 eventName 
13}

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More