README
React form designer
eg:
import {FormGenerator} from 'FormDesigner'
const schema = {
title: '属性编辑器',
name: 'form12',
id: 'InputTextProperties',
description: '属性编辑器',
elements: [{
id: 'a23dsdee3',
type: 'TextInput', // 输入类型
name: 'label.label', // 字段名称
label: '名称', // 输入 label 名称
// help: "label 名称", // 提示信息
tip: "label 名称",
placeholder: '请输入 label 名称',
// 校验规则数组
rules: [{
type: 'string', // 校验类型
required: true, // 是否必填
min: 5, // 最小长度
max: 10, // 最大长度
message: '用户名至少为 5 个字符, 最多 10 个字符', // 校验提示信息
}, {
// 自定义校验
validator(rule, value, callback) {
setTimeout(() => {
callback(); // success
// callback('校验错误'); //error
}, 100);
}
}]
}, {
id: 'u23asdf0asfawef',
type: 'Checkboxes',
label: '多选',
checkboxes: [{
id: 'asdfasd',
name: 'eat',
label: '吃饭饭',
rules: [{
type: 'boolean',
required: true,
message: '必须要勾选吃饭'
}]
}, {
id: 'adsn24123asdf',
name: 'sleep',
label: '碎觉觉'
}, {
id: 'asd239123adf',
name: 'code',
label: '打代码'
}]
}, {
id: 'wqwer1234123',
type: 'Radios',
name: 'sex',
label: '单选',
radios: [{
label: '男',
value: 'male'
}, {
label: '女',
value: 'female'
}],
rules: [{
required: true,
message: '请选择性别'
}]
}, {
id: 'asf123asdf',
type: 'Select',
name: 'country',
label: '国籍',
placeholder: '请选择国籍',
defaultValue: 'china',
options: [{
value: 'china',
label: 'China'
}, {
value: 'usa',
label: 'America'
}, {
value: 'japan',
label: 'Japan'
}],
rules: [{
required: true,
message: '请选择国籍'
}]
}, {
id: 'adsq4r1najksdgw',
type: 'Textarea',
name: 'message',
label: '留言',
placeholder: '请输入留言',
rules: [{
required: true,
message: '请输入留言信息'
}]
}]
}
var initialValue = {
eat: true,
sex: 'male',
country: 'China'
}
function render() {
return <FormGenerator
schema={schema}
initialValue={initialValue}
/>
}