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 | object arry | 要生成表单的信息 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 |

formInfos 属性配置

| 字段 | 类型 | 说明 | | -------- | :----: | -------------: | | formType | string | 要成表单的类型 | | ... | ... | ... |

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

ItemView

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

属性配置

| 字段 | 类型 | 说明 | | --------- | :----------------: | -----------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | children | object or funciton | 子元素 |

Input

字符串输入框

属性配置

| 字段 | 类型 | 说明 | | ------------ | :------: | ---------------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | style | object | input 输入框的样式 | | type | string | 输入框的类型，值为"text" 或 "textArea" 默认为 "text" | | value | string | 输入框的值 | | focusControl | boolean | 默认值为 false, 当值为 true 时，组件为受控组件 | | placeholder | string | 输入框的占位符 | | row | number | 当 type 的值为 "textArea" 时，输入框的行数 | | onChange | function | 当输入值变化的回调函数 |

PatternInput

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

属性配置

| 字段 | 类型 | 说明 | | ------------ | :------: | ---------------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | style | object | input 输入框的样式 | | type | string | 输入框的类型，值为"text" 或 "textArea" 默认为 "text" | | value | string | 输入框的值 | | focusControl | boolean | 默认值为 false, 当值为 true 时，组件为受控组件 | | placeholder | string | 输入框的占位符 | | row | number | 当 type 的值为 "textArea" 时，输入框的行数 | | pattern | string | 对当前输入值的格式要求 | | patternInfo | object | 自定义对当前输入值的格式要求 | | onChange | function | 当输入值变化的回调函数 |

pattern 支持的格式要求

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

patternInfo 属性配置

| 字段 | 类型 | 说明 | | ----------- | :------: | -----------------------------: | | name | string | 格式要求名 | | patternHint | string | 当前输入不符合格式要求时的提示 | | check | function | 校验格式是否合格的函数 |

MultiInput

多个字符串输入框

属性配置

| 字段 | 类型 | 说明 | | ------------ | :------: | ---------------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | style | object | input 输入框的样式 | | type | string | 输入框的类型，值为"text" 或 "textArea" 默认为 "text" | | value | array | 包含所有输入框的值的数组 | | focusControl | boolean | 默认值为 false, 当值为 true 时，组件为受控组件 | | placeholder | string | 输入框的占位符 | | row | number | 当 type 的值为 "textArea" 时，输入框的行数 | | indexHintMap | object | 用于在某个输入框的下面显示提示 | | onChange | function | 当输入值变化的回调函数 |

indexHintMap 属性配置

| 字段 | 类型 | 说明 | | ------- | :----: | ---------------------------------------------: | | [index] | object | key [index] 为输入框的位置 , value 为 提示配置 |

indexHintMap 某个[index]的属性配置

| 字段 | 类型 | 说明 | | ------ | :-----: | ---------------------------------------------: | | text | string | 提示文字 | | status | boolean | 默认值为 false, 当值为 true 时，提示文字为红色 |

indexHintMap 配置例子

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

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

NumberInput

数字输入框

属性配置

| 字段 | 类型 | 说明 | | --------- | :------: | -----------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | value | number | 输入框的值 | | max | number | 可以输入的最大值 | | min | number | 可以输入的最小值 | | step | number | 增加数字的步长 | | onChange | function | 当输入值变化的回调函数 |

Select

选择器

属性配置

| 字段 | 类型 | 说明 | | ------------ | :-----------------: | ---------------------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | style | object | 输入框的样式 | | value | string | 选择的选项的值 | | placeholder | string | 输入框的占位符 | | optionsData | object | 选项信息 | | disableOpts | object | 禁止选择的选项 | | filterOption | boolean or function | 当值为 true 时开启默认搜索过滤选项，函数则为自定义过滤规则 | | onChange | function | 当输入值变化的回调函数 |

optionsData 属性配置

| 字段 | 类型 | 说明 | | ----- | :----: | --------------------: | | [key] | object | [key] 是选项的 value, |

optionsData 某个[key]的属性配置

| 字段 | 类型 | 说明 | | ---- | :----: | -------------: | | text | string | 选项的文字内容 |

optionsData 配置例子

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

disableOpts 属性配置

| 字段 | 类型 | 说明 | | ----- | :-----: | -----------------------------------------------------------------: | | [key] | boolean | [key] 是选项的 value, 默认值为 false, 当值为 true 时，选项无法选择 |

{
    man: true;
}

RadioGroup

单选框组

属性配置

| 字段 | 类型 | 说明 | | ----------- | :------: | -----------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | value | string | 选择的选项的值 | | optionsData | object | 选项信息 | | disableOpts | object | 禁止选择的选项 | | onChange | function | 当输入值变化的回调函数 |

optionsData 属性配置

| 字段 | 类型 | 说明 | | ----- | :----: | ---------------------: | | [key] | object | [key] 是选项 的 value, |

optionsData 某个[key]的属性配置

| 字段 | 类型 | 说明 | | ---- | :----: | -----------: | | text | string | 选项的 label |

optionsData 配置例子

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

disableOpts 属性配置

| 字段 | 类型 | 说明 | | ----- | :-----: | -----------------------------------------------------------------: | | [key] | boolean | [key] 是选项的 value, 默认值为 false, 当值为 true 时，选项无法选择 |

{
    man: true;
}

CheckboxGroup

多选框组

属性配置

| 字段 | 类型 | 说明 | | ----------- | :------: | -----------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | value | array | 包含所有选择的选项的值的组合 | | optionsData | object | 选项信息 | | disableOpts | object | 禁止选择的选项 | | onChange | function | 当输入值变化的回调函数 |

optionsData 属性配置

| 字段 | 类型 | 说明 | | ----- | :----: | --------------------: | | [key] | object | [key] 是选项的 value, |

optionsData 某个[key]的属性配置

| 字段 | 类型 | 说明 | | ---- | :----: | -----------: | | text | string | 选项的 label |

optionsData 配置例子

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

disableOpts 属性配置

| 字段 | 类型 | 说明 | | ----- | :-----: | -----------------------------------------------------------------: | | [key] | boolean | [key] 是选项的 value, 默认值为 false, 当值为 true 时，选项无法选择 |

{
    man: true;
}

DatePicker

日期选择器

属性配置

| 字段 | 类型 | 说明 | | -------------- | :------: | ---------------------------------------------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | style | object | 输入框的样式 | | value | string | 选择的日期， 格式必须为"YYYY-MM-DD HH:mm:ss" | | disabledDate | function | 判断日期是否合法的函数 | | hmsValueStatus | string | 日期的时分秒的默认值类型，reset-默认值是 "00:00:00" ，maxValue-默认值是 "23:59:59" | | onChange | function | 当输入值变化的回调函数 |

TimeRange

日期范围选择器

属性配置

| 字段 | 类型 | 说明 | | ------------ | :------: | -------------------------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | style | object | 输入框的样式 | | value | array | 选择的日期组合，每个值格式必须为"YYYY-MM-DD HH:mm:ss" | | disabledDate | function | 判断日期是否合法的函数 | | legalRange | array | 合法的日期范围，每个值格式必须为"YYYY-MM-DD HH:mm:ss" | | itemLayout | object | 即 antd 组件库中的 Form 组件的 layout 属性，但是配置给子表单的 | | onChange | function | 当输入值变化的回调函数 |

Range

数字范围输入框

属性配置

| 字段 | 类型 | 说明 | | ---------- | :------: | -----------------------------------------------: | | required | boolean | 是否必要 | | check | boolean | 默认值为 false, 当值为 true 时，才会显示错误信息 | | disabled | boolean | 默认值为 false, 当值为 true 时，禁止修改 | | isIllegal | boolean | 默认值为 false, 当值为 true 时表明当前输入错误 | | errorHint | string | 错误提示 | | label | string | 标签 | | layout | object | 即 antd 组件库中的 Form 组件的 layout 属性 | | hidden | boolean | 默认值为 false, 当值为 true 时，表单隐藏 | | help | string | 帮助提示 | | value | array | 填入的数字范围 | | legalRange | array | 合法的数字范围 | | onChange | function | 当输入值变化的回调函数 |

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.