antd-form-designer

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}
            />
}