Next-formx NPM

next-formx

根据配置数据生成Form

API

Form

参数	说明	类型	默认值
groupNumber	每行分组数量	number	1
formItems	formItem配置	FormItem[]

FormItem

更多参数配置，参考antd formItem配置

参数	说明	类型	默认值
type	类型	FormItemTypes	input
ghost	是否隐藏	string boolean
required	是否必填	string boolean
options	组件配置项，具体字段参考对应组件的配置	object

FormItemTypes

属性	值	说明	配置项
INPUT	input	输入框	查看
SWITCH	switch	切换	查看
SELECT	select	下拉框	参考Select api
NUMBER	number	数字输入框	参考Number api
DATE_PICKER	datePicker	日期选择	查看
RANGE_PICKER	rangePicker	日期范围选择	查看
CHECKBOX_GROUP	checkboxGroup	多选	查看

Number

基于antd input-number封装，支持金额格式化、整数限制。更多API 请参考antd InputNumber

参数	说明	类型	默认值
isAmount	金额format	boolean
isInteger	整数限制，为true时只允许输入整数	boolean

Select

基于antd select封装，支持传入url获取数据。更多API 请参考antd Select

参数	说明	类型	默认值
url	获取数据url	string
cacheKey	缓存key，需全局唯一，只获取一次数据	boolean	false
query	查询参数	object
extra	客户扩展数据，被form嵌套下参数才生效	string[]
fieldNames	label value显示的字段	{ label: string; value: string }	{ label: 'label', value: 'value' }

示例

formItems配置项示例

import { FormItemTypes } from 'next-formx';

const formItems = [
  {
    name: 'uNm'
  },
  {
    name: 'age',
    type: FormItemTypes.NUMBER,
    required: '!!${uNm}', // 根据uNm 控制是否必填
    options: { // options 组件配置项
      isInteger: true
    }
  },
  {
    name: 'child',
    type: FormItemTypes.SELECT,
    options: {
      url: '/api/getUsers',
      query: '{"where":{"partner":${uNm}}}', // 基于其他字段动态生成query
      extra: ['sex','cunm=childName'] // 扩展出sex，childName并重命为cunm
    }
  }
]