config-form v1.0.14

config-form

generate form based on the json config

项目简介

中后台系统往往需要编写大量的表单逻辑，而且其中大量工作重复度高，为了减少没必要的重复工作，对 antd 组件库中的表单组件结合一些常用的表单逻辑封装成一个组件，该组件可以根据 json 配置生成表单逻辑。

环境安装

• 安装本项目

npm i config-form --save

使用例子

import { ConfigForm } from "config-form";

const UserForm = ({ data }) => {
    const [value, setValue] = useState("");
    const formInfos = [
        {
            formType: "Input",
            label: "账号",
            help: "输入邮箱或者手机号作为账号",
            placeholder: "请输入账号",
            errorHint: "账号不能为空",
            required: true,
            value: value,
            onChange: v => setValue(v)
        }
    ];
    return <ConfigForm formInfos={formInfos}></ConfigForm>;
};

上面的例子中，ConfigForm 根据 formInfos 里的信息生成了一个包含了标签，提示，占位符，错误提示等逻辑的字符串输入框。

目录

• ConfigForm
  • ItemView
  • Input
  • PatternInput
  • MultiInput
  • NumberInput
  • Select
  • RadioGroup
  • CheckboxGroup
  • DatePicker
  • TimeRange
  • Range

ConfigForm

属性

formInfos 属性配置

formType 指定了用那一个表单组件，formInfos 属性的配置会根据不同的表单组件有不同的属性，下面我们分别介绍。

ItemView

antd 组件库中的 Form.Item 的再一层封装的容器组件，下面所有的输入组件都用这个组件包装的，所以都有以下配置属性，除了 children 属性。

属性配置

Input

字符串输入框

属性配置

PatternInput

带格式校验的字符串输入框

属性配置

pattern 支持的格式要求

• sign （标识）
• uri （链接）
• version （版本号）
• email （邮件地址）
• phone （手机号）
• json （json 字符串）

patternInfo 属性配置

MultiInput

多个字符串输入框

属性配置

indexHintMap 属性配置

indexHintMap 某个index的属性配置

indexHintMap 配置例子

{
    0: {
        text: '请在第一个输入框输入姓名',
        status: true,
    }
}

该提示会出现在第一个输入框和第二输入框中间

NumberInput

数字输入框

属性配置

Select

选择器

属性配置

optionsData 属性配置

optionsData 某个key的属性配置

optionsData 配置例子

{
    man: {
        text: "男";
    },
    woman: {
        text: "女";
    }
}

disableOpts 属性配置

{
    man: true;
}

RadioGroup

单选框组

属性配置

optionsData 属性配置

optionsData 某个key的属性配置

optionsData 配置例子

{
    man: {
        text: "男";
    },
    woman: {
        text: "女";
    }
}

disableOpts 属性配置

{
    man: true;
}

CheckboxGroup

多选框组

属性配置

optionsData 属性配置

optionsData 某个key的属性配置

optionsData 配置例子

{
    man: {
        text: "男";
    },
    woman: {
        text: "女";
    }
}

disableOpts 属性配置

{
    man: true;
}

DatePicker

日期选择器

属性配置

TimeRange

日期范围选择器

属性配置

Range

数字范围输入框

属性配置

License (MIT)

Copyright (c) 2019 gintamamadao

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.