JSON生成Form表单的方法示例(2)

type是用来唯一表示表单组件类型的字段,其中JSON表单提供了三种默认的表单组件:input、select、textarea,还有两种复杂类型的表单组件:form_array、container。

form_array表单组件表示其数据结构为Array,含有增加项删除项的复合表单组件,该表单组件的配置里多一个children的字段,里面是每一项里面的表单组件配置的集合,其表单组件的效果如下图所示:

container是用来自定义表单的接口,具体用法参考下面具体的介绍。

2. validate

validate是校验表单组件数据正确性的字段,其值为数组,里面的数组元素可以为String、object、RegExp、Function。

JSON表单采用的是async-validator异步处理校验,在JSON表单内部会将validate传入的校验关键字解析为async-validator的rules。所以validate数组元素如果为object的话,其内容就是async-validator的rules。

1. 数组元素为string,其值可以为:

string,值必须为string

number,值必须为数字

required,值不能为空

boolean,值必须为布尔值

integer,值必须为整数形

float,值必须为浮点型

email,值必须为邮箱类型

2. 数组元素为object,其值为rules:
{type: 'enum', enum: ['1', '2'], message: '值不在确定范围内'}

3. 数组元素为RegExp, validate: [/^[a-zA-Z_{}0-9]+$/g]

4. 数组元素为Function, validate: [ (rules, value, callback) => {}]

3. style

用来确定表单组件在表单内的布局样式,比如想让表单组件行内显示,且宽度为200,其style值如下:

{ display: 'inline-block', width: 200 }

container表单组件

container表单组件是用来自定义表单组件的,它主要的作用有以下几点:

添加表单组件库,例如Ant-Design

自定义表单组件,例如图片上传组件

用来构建复杂的表单组件

处理控制逻辑和联动逻辑

使用栗子

import { Input, Select } from 'antd' const Option = Select.Option { type: 'container', dataKey: 'descr', style: { display: 'inline-block', width: 100, margin: '0 15px' }, options: ['string', 'integer', 'float'], render: (curData, config, {changeFn, getFocus, loseFocus, error}) => { return <Select value={curData} style={{width: '100%', height: 35}} onMouseEnter={getFocus} onChange={(value) => changeFn(value, () => { loseFocus() })}> { config.options && config.options.map((item, idx) => <Option key={idx} value={item}>{item}</Option>) } </Select> } },

container表单组件只是多一个render渲染方法,里面可以自定义表单组件的渲染内容,render方法提供如下参数:

1. curData: 当前container组件的值,跟dataKey相关
2. config: 当前container组件的配置
3:{changeFn, changeDataFn, getFocus, loseFocus, error, JSONForm}
changeFn, changDataFn是提交数据的方法,changeFn只能修改当前组件dataKey的值,changeDataFn可以修改data中任意字段的值,changeFn(value, [callback]), changeFn(dataKey, value, [callback])
getFocus,loseFocus是自定义处理校验的字段,loseFocus是开始校验,getFocus是去掉校验的报错信息
error是校验结果的报错信息
JSONForm是在container中使用JSON表单的组件配置用来生成新的表单组件,意思里container中依然可以嵌套表单组件。

使用antd的组件库

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7747ee195028a32af5715989b379d953.html