{"id":18369063,"url":"https://github.com/dog-days/antd-react-form-builder","last_synced_at":"2025-04-06T17:31:56.718Z","repository":{"id":97135422,"uuid":"74323155","full_name":"dog-days/antd-react-form-builder","owner":"dog-days","description":"Example","archived":false,"fork":false,"pushed_at":"2018-06-13T09:49:49.000Z","size":613,"stargazers_count":72,"open_issues_count":0,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-21T23:34:58.568Z","etag":null,"topics":["antd","form","form-builder","form-validation","react"],"latest_commit_sha":null,"homepage":"https://xianshannan.github.io/antd-react-form-builder/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dog-days.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-21T03:35:27.000Z","updated_at":"2024-03-16T04:38:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"09fb33b2-deb4-46bf-ac9e-922ae8243555","html_url":"https://github.com/dog-days/antd-react-form-builder","commit_stats":{"total_commits":182,"total_committers":3,"mean_commits":"60.666666666666664","dds":"0.10989010989010994","last_synced_commit":"24e79400c3938772ac451cd8e5df037b3fe93da2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fantd-react-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fantd-react-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fantd-react-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fantd-react-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dog-days","download_url":"https://codeload.github.com/dog-days/antd-react-form-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522444,"owners_count":20952552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","form","form-builder","form-validation","react"],"created_at":"2024-11-05T23:28:19.746Z","updated_at":"2025-04-06T17:31:55.475Z","avatar_url":"https://github.com/dog-days.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# antd-react-form-builder\n\n\u003e **Deprecated，请使用[antd-form-component](https://github.com/dog-days/antd-form-component)**\n\n之所以写了这个项目有以下几点原因：\n\n- [Antd](https://ant.design/docs/react/introduce)的表单验证是会触发整个组件渲染，（使用Form.create()装饰器后和getFieldDecorator后）\n- 默认的Antd表单组件是不自带验证的，需要使用配套的getFieldDecorator装饰过后才可以验证。\n- 没有嵌套的表单可用。\n\n基于以上原因，就有了本项目。\n\n本项目是基于[Antd](https://ant.design/docs/react/introduce)的antd-react-form-builder，既可以使用配置生成表单（**整合了表单验证，单并不采用getFieldDecorator**），也支持直接是使用JSX。（两种方式都支持，就像使用react-router一样）\n\n### 安装\n\n目前只支持通过npm安装。\n\n```sh\nnpm install antd-react-form-builder --save\n```\n\n### 兼容\n\n兼容IE10以上，兼容谷歌、Safari、火狐等浏览器最新版本。\n\n### 使用\n\n`antd-react-form-builder`是基于antd form进行了一些简便封装，具体antd from用法还是要使用者自己去了解，这里就不多说。`antd-react-form-builder`的表单项都包含了antd 的`\u003cFormItem \\\u003e`，表单验证直接通过表单组件props.rules传进来。详细的说明请看下面的**API**。\n\n可以直接参考本项目中的demo。\n\n需要而外引入css文件\n\n```js\nimport \"antd/dist/antd.css\"\nimport \"antd-react-form-builder/lib/style/style.css\"\n```\n\n或者\n\n```jsx\nimport \"antd-react-form-builder/lib/style/index\"\n```\n\n#### JSX直接使用\n\n```jsx\nimport React from 'react'\nimport {\n  FormBuilder,\n  Input,\n} from \"antd-react-form-builder\"\nimport {\n  Form,\n} from \"antd\"\n\n@FormBuilder.create()\nexport default class Container extends React.Component {\n  handleOnsubmit(e){\n    e.preventDefault();\n    this.props.formBuilder \u0026\u0026\n    this.props.formBuilder.validateFields((err, values) =\u003e {\n      console.debug('values: ', values);\n      if(err){\n        console.debug(\"表单错误\",err)\n        return; \n      }else {\n        console.debug('表单值: ', values);\n      }\n    });\n  }\n  render(){\n    return (\n  \t  \u003cFormBuilder\n        onSubmit={ this.handleOnsubmit }\n        size=\"default\"\n        hasFeedback={ true }\n        horizontal \n      \u003e\n        \u003cInput \n          type=\"text\" \n          name=\"text\"\n          rules={ \n            [\n              {\n                \"required\": true,\n                \"message\": \"请不要留空\"\n              }\n            ]\n          }\n          value=\"ddd\"\n          placeholder=\"请输入！\"\n        /\u003e\n        \u003cInput \n          type=\"text\" \n          name=\"text\"\n          required\n          value=\"ddd\"\n\t\t label=\"随意\"\n          placeholder=\"请输入！\"\n        /\u003e\n        \u003cForm.Item\u003e\n          \u003cButton htmlType=\"submit\"\u003e\n            提交\n          \u003c/Button\u003e\n        \u003c/Form.Item\u003e\n  \t  \u003c/FormBuilder\u003e\n  \t)\n  }\n}\n```\n\n#### 通过配置使用（简单的）\n\n```jsx\nimport React from 'react'\nimport {\n  FormBuilder,\n  Input,\n} from \"antd-react-form-builder\"\nlet config = [\n  {\n    type: \"text\",\n    name: \"text[]\",\n    //规则验证，必填验证可以直接使用required\n    rules: [\n      {\n        required: true,\n        \"message\": \"请不要留空\"\n      }\n    ],\n    //antd Form.Item props，formItemProps.label可以直接使用label=\"xxx\"\n    formItemProps: {\n      label: \"随意\",\n      labelCol: { \"span\": 0 }\n    },\n    value: \"dddd\",\n    placeholder: \"请输入！\"\n  },\n  {\n    type: \"text\",\n    name: \"text\",\n    required\n    label: \"随意\"\n    value: \"dddd\",\n    placeholder: \"请输入！\"\n  },\n]\n@FormBuilder.create()\nclass Container extends React.Component {\n  handleOnsubmit(e){\n    e.preventDefault();\n    this.props.formBuilder \u0026\u0026\n    this.props.formBuilder.validateFields((err, values) =\u003e {\n      console.debug('values: ', values);\n      if(err){\n        console.debug(\"表单错误\",err)\n        return; \n      }else {\n        console.debug('表单值: ', values);\n      }\n    });\n  }\n  render(){\n    return (\n  \t  \u003cFormBuilder\n        config={config}\n        onSubmit={ this.handleOnsubmit }\n        size=\"default\"\n        hasFeedback={ false }\n        horizontal \n      /\u003e\n  \t)\n  }\n}\nexport default Container;\n```\n\n#### 混合使用\n\n```jsx\nimport React from 'react'\nimport {\n  FormBuilder,\n  Input,\n} from \"antd-react-form-builder\"\nlet config = [\n  {\n    type: \"text\",\n    name: \"text\",\n    required\n    label: \"随意\"\n    value: \"dddd\",\n    placeholder: \"请输入！\"\n  },\n]\n@FormBuilder.create()\nclass Container extends React.Component {\n  handleOnsubmit(e,err,values){\n    e.preventDefault();\n    console.debug('表单值: ', values);\n    if(err){\n      console.debug(\"表单错误\",err)\n      return; \n    }\n  }\n  render(){\n    return (\n  \t  \u003cFormBuilder\n        config={config}\n        onSubmit={ this.handleOnsubmit }\n        size=\"default\"\n        hasFeedback={ false }\n        horizontal \n      \u003e\n        \u003cInput \n          type=\"text\" \n          name=\"text\"\n          required\n          value=\"ddd\"\n\t\t label=\"随意\"\n          placeholder=\"请输入！\"\n        /\u003e\n        \u003cForm.Item\u003e\n          \u003cButton htmlType=\"submit\"\u003e\n            提交\n          \u003c/Button\u003e\n        \u003c/Form.Item\u003e\n      \u003c/FormBuilder\u003e\n  \t)\n  }\n}\nexport default Container;\n```\n\n### 国际化\n\n跟antd的国际化用法一致，请参考[https://ant.design/docs/react/i18n-cn](https://ant.design/docs/react/i18n-cn)。\n\n```jsx\nimport AntdEnUS from 'antd/lib/locale-provider/en_US'\nimport FormBuilderEnUS from '../lib/locale-provider/es_US'\n//整合Antd和FormBuilder的国际化语言\nlet enUS = Object.assign({},AntdEnUS,FormBuilderEnUS)\nreturn (\n  \u003cLocaleProvider locale={enUS}\u003e\n    \u003cApp /\u003e\n  \u003c/LocaleProvider\u003e\n);\n```\n\n### FormBuilder API\n\n表单验证的API，请看[antd的表单验证](https://ant.design/components/form/#getFieldDecorator-参数)和[async-validator](https://github.com/yiminghe/async-validator)（antd 采用了这个）。\n\n#### FormBuilder\n\n```jsx\n\u003cFormBuilder\n  config={config}\n  onSubmit={ this.handleOnsubmit }\n  size=\"default\"\n  hasFeedback={ false }\n\u003e\n  \u003cInput name=\"test\"/\u003e\n\u003c/FormBuilder\u003e\n```\n\n| props            | 说明                                       | 类型      | 必填   | 默认值     |\n| ---------------- | ---------------------------------------- | ------- | ---- | ------- |\n| config\u0010          | FormBuilder 配置项，表单就是从这些配置中渲染出来的          | object  | 否    | 无       |\n| size             | 设置表单子项（包括antd Input、Select等和FormItem）size，单个针对设置优先级更高。 | string  | 否    | default |\n| hasFeedback      | 表单验证在antd的FormItem验证是否反馈，单个针对设置优先级更高。    | boolean | 否    | false   |\n| labelCol         | 跟antd的Form.Item prop.labelCol完全一致，这里是统一设置，单个针对设置优先级更高。 | object  | 否    | 无       |\n| wrapperCol       | 跟antd的Form.Item prop.wrapperCol完全一致，这里是统一设置，单个针对设置优先级更高。 | object  | 否    | 无       |\n| formBuilder      | 经 `FormBuilder.create()` 包装过的组件会自带 `this.props.formBuilder` 属性，FormBuilder 无需设置。用法跟antd的`Form.create()`类似。 | object  | 否    | 无       |\n| selectSourceData | list类型数据源，动态配置的时候用到，直接写配置的可以不用这种方式，主要是配合FormBuilderConfiger使用。 | array   | 否    | 无       |\n| 其他props          | 其他props完全跟antd \\\u003cForm /\\\u003e一致              |         |      |         |\n\nconfig格式如下，可以参考后续的每个表单项props API：\n\n```js\n//简单的\nvar simpleConfig = [\n  {\n    key: \"name\",\n    name: \"physics\",\n    label: \"服务器物理属性表\",\n    required: true,\n    type: \"number\",\n  }\n]\n//嵌套的，关键看children\n//模型\nvar config = [\n  {\n    key: \"name\",\n    name: \"physics\",\n    label: \"服务器物理属性表\",\n    required: true,\n    type: \"object\",\n    children: [\n      {...},\n      {...},\n    ],\n  },\n  {\n    key: \"name\",\n    name: \"physics\",\n    label: \"服务器物理属性表\",\n    required: true,\n    type: \"array\",\n    children: [\n      [...],\n      [...],\n    ],\n  },\n]\n//示例\nvar config = [\n  {\n    key: util.getUniqueKey(),\n    name: \"physics\",\n    label: \"服务器物理属性表\",\n    type: \"object\",\n    required: true,\n    children: [\n      {\n        name: \"power_num\",\n        type: \"number\",\n        required: true,\n        label: \"电源个数\",\n        value: \"10\",\n        read_only: true,\n        can_not_delete: true,\n      },\n      {\n        name: \"rack_digit\",\n        type: \"number\",\n        required: true,\n        label: \"机架位数\",\n      },\n      {\n        name: \"dist_list\",\n        type: \"array\",\n        required: true,\n        label: \"硬盘列表\",\n        children: [\n          [\n            {\n              name: \"brand\",\n              type: \"string\",\n              required: true,\n              label: \"硬盘品牌\",\n            },\n            {\n              name: \"model\",\n              type: \"string\",\n              required: true,\n              label: \"硬盘型号\",\n            },\n          ],\n\t\t [\n            {\n              name: \"brand1\",\n              type: \"string\",\n              required: true,\n              label: \"硬盘品牌1\",\n            },\n            {\n              name: \"model1\",\n              type: \"string\",\n              required: true,\n              label: \"硬盘型号1\",\n            },\n          ],\n        ],\n      },\n    ]\n  }\n]\n```\n\n结构说明\n\n| 字段名      | 类型     | 说明                                       | 必填   |\n| -------- | ------ | ---------------------------------------- | ---- |\n| key      | string | react key值                               | 否    |\n| name     | string | 字段名                                      | 是    |\n| type     | string | 字段类型                                     | 是    |\n| label    | string | 字段说明                                     | 否    |\n| required | string | 是否必填                                     | 否    |\n| children | array  | 子字段，里面的结构完全同父结构，只有`object`和`array`类型有children字段。 | 否    |\n\n`type`说明\n其中`dropdown`、`table`、`object`是特殊的类型。\n\n| 可取值      | 说明                                   | 是否有子字段 |\n| -------- | ------------------------------------ | ------ |\n| object   | 对象类型，子字段可以选择所有不同的类型                  | 否      |\n| table    | 表格类型，子字段可以选择所有不同的类型                  | 有      |\n| array    | 表格类型，子字段可以选择所有不同的类型（有歧义，已废弃，请用table） | 有      |\n| dropdown | 下拉类型，select选择框，特殊的一种，需要设置数据源才可用      | 否      |\n| string   | 字符串类型，默认是这种类型                        | 否      |\n| number   | 数字类型                                 | 否      |\n| integer  | 整数类型                                 | 否      |\n| float    | 浮点数类型                                | 否      |\n| boolean  | 布尔值 true \\|\\| false                  | 否      |\n| date     | 日期对象类型                               | 否      |\n\n#### FormBuilder.create()\n\n高阶组件方式\n\n```jsx\nclass CustomizedForm extends React.Component {}\nCustomizedForm = FormBuilder.create()(CustomizedForm);\n```\n\n类装饰器方式\n\n```jsx\n@FormBuilder.create()\nclass CustomizedForm extends React.Component {}\n```\n\n类似antd的`FormBuilder.create()`。经过 `FormBuilder.create()` 包装的组件将会自带 `this.props.formBuilder` 属性，`this.props.formBuilder` 提供的 API 如下：\n\n| 参数             | 说明                                       | 类型     | 类型                                   |\n| -------------- | ---------------------------------------- | ------ | ------------------------------------ |\n| setFieldsValue | 跟antd的一样，设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环） | string | setFieldsValue({xxx: value})         |\n| validateFields | 校验并获取全部表单组件的输入域的值与 Error，通常在onSubmit中使用，这里返回的参数values的值都是字符串，TimePicker、DataPicker、MonthPicker、RangePicker返回的时unix时间戳。（跟antd不一样的地方在于不可以局部校验） | string | validateFields(function(err,values)) |\n| 其他props        | 其他props完全跟antd \\\u003cInput /\\\u003e一致             |        |                                      |\n\n#### FormBuilder.valuesToConfig\n\nformBuilderConfig value赋值（根据FormBuilder的表单结构所存储的值来赋值） 。当我们需要为嵌套的表单赋值时，使用这个方法（setFieldsValue不够用了）。\n\n| 参数                | 说明                         | 类型     | 默认值  |\n| :---------------- | :------------------------- | :----- | :--- |\n| formBuilderConfig | FormBuilder组件的props.config | array  | 无    |\n| data              | FormBuilder的嵌套表单的值         | object | 无    |\n\n```jsx\n//配置\nvar config = [\n  {\n    key: 1,\n    type: \"email\",\n    required: true,\n    label: \"说明\",\n    placeholder: \"请输入\"\n  },\n  {\n    key: 2,\n    type: \"email2\",\n    required: true,\n    label: \"说明\",\n    placeholder: \"请输入\"\n  },\n]\nvar values = {\n  email: \"test@163.com\",\n  email2: \"test2@163.com\",\n}\nconfig = FormBuilder.valuesToConfig(config,values);\n...\nreturn (\n  \u003cFromBuilder config={config}/\u003e\n)\n...\n```\n\n#### 表单组件公共部分的API\n\n| props         | 说明                                       | 类型      | 必填   | 默认值   |\n| ------------- | ---------------------------------------- | ------- | ---- | ----- |\n| name          | input、select等的的name（跟原生的html一样），同时async-validator要用到（表单验证），取值要用到，要唯一。 | string  | 是    | 无     |\n| label         | 表单项左边的展示名称                               | string  | 否    | 无     |\n| value         | 初始化的value设置，**这里没有`defaultValue`的概念**。   |         |      |       |\n| required      | 表单项是否必填（这个验证会合并到rules中的）                 | boolean | 否    | 无     |\n| rules         | 验证规则请参考下面`props.rules`的说明。               | array   | 否    | 无     |\n| formItemProps | 跟antd的Form.Item的props完全一致，请参考[Form.Item](https://ant.design/components/form-cn/#Form.Item)，这个不经常使用 | object  | 否    | 无     |\n| array         | 是否是数组类型的表单（可以动态添加多项）。**注意：除了select类型表单组件，其他表单组件都应用这个设置**。 | boolean | 否    | false |\n| 其他props       | 其他props继承antd的中表单项，`defualtValue`除外。     |         |      |       |\n\n`props.rules`大致结构如下，更高级请参考 [async-validator](https://github.com/yiminghe/async-validator)。\n\n```js\n[\n  //async-validator自带的验证规则\n  { type: \"string\", required: true,message: \"必填项\"},\n  //自定义验证规则\n  {\n    validator(rule, value, callback, source, options) {\n      var errors = [];\n      // test if email address already exists in a database\n      // and add a validation error to the errors array if it does\n      callback(errors);\n    }\n  }\n]\n```\n\n#### Input\n\n```jsx\n//jsx\n\u003cInput type=\"email\" required label=\"说明\" placeholder=\"请输入\"/\u003e\n//配置\n[{\n  type: \"email\",\n  required: true,\n  label: \"说明\",\n  placeholder: \"请输入\"\n}]\n```\n\n| props      | 说明          | 类型                  | 必填   | 默认值   |\n| ---------- | ----------- | ------------------- | ---- | ----- |\n| type       | 表单子项类型      | string              | 否    | text  |\n| onlyLetter | 是否只允许输入英文字母 | boolean             | 否    | false |\n| min        | 输入字符最小长度    | number  \\|\\| string | 否    | 无     |\n| max        | 输入字符最大长度    | number  \\|\\| string | 否    | 无     |\n\n参考[Antd.Input](https://ant.design/components/input-cn/)。\n\n公共部分的props请参考，**表单组件公共部分的API**。\n\ntype类型如下：\n\n| type类型   | 说明                        |\n| -------- | ------------------------- |\n| email    | 自带email格式验证input          |\n| url      | 自带urll格式验证input           |\n| phone    | 自带手机验证规则（现在只支持中国的，不支持国外的） |\n| hidden   | 隐藏Input                   |\n| textarea | textarea                  |\n\n#### InputNumber\n\n```jsx\n//jsx\n\u003cInputNumber required label=\"说明\" placeholder=\"请输入\"/\u003e\n//配置\n[{\n  type: \"number\",\n  required: true,\n  label: \"说明\",\n  placeholder: \"请输入\"\n}]\n```\n\n| 说明                                       | props | 类型     | 必填   | 默认值    |\n| ---------------------------------------- | ----- | ------ | ---- | ------ |\n| 使用配置时**必填**，直接使用JSX可选。type值分别为`number`、`float`、`integer`。 | type  | string | 否    | number |\n\n参考[Antd.Input](https://ant.design/components/input-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### Select\n\n```jsx\n//jsx\n\u003cSelect required label=\"说明\" options={[]}/\u003e\n//配置\n[{\n  type: \"select\",\n  required: true,\n  label: \"说明\",\n  options: []\n}]\n```\n\n| props    | 说明                                       | 类型      | 默认值    |\n| -------- | ---------------------------------------- | ------- | ------ |\n| type     | 使用配置时**必填**，直接使用JSX可选。type取值`select`，只有一种值。 | string  | select |\n| options  | select options配置项                        | array   | []     |\n| multiple | 是否多选                                     | boolean | false  |\n| group    | select分组配置项，这个配置优先于`props.options`       | array   | 无      |\n| boolean  | 是否是boolean选择组件（只有”是“和”否“两个选项）            |         |        |\n\n参考[Antd.Select](https://ant.design/components/select-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\nselect`props.options`结构如下：\n\n```js\n[\n  {\n    value: \"shenzhen\",\n    label: \"深圳\"\n  },\n  {\n    value: \"beijing\",\n    label: \"北京\"\n  },\n]\n```\n\nselect`props.group`结构如下：\n\n```js\n[\n  {\n    label: \"广东省\",\n    options: [\n      {\n        value: \"shenzen\",\n        label: \"深圳\"\n      }\n    ] \n  },\n  {\n    label: \"广东省\",\n    options: [\n      {\n        value: \"shenzen2\",\n        label: \"深圳2\"\n      }\n    ] \n  },\n]\n```\n\n#### TimePicker\n\n```jsx\n//jsx\n\u003cTimePicker required label=\"说明\" value=\"19:01:00\"/\u003e\n//配置\n[{\n  type: \"time\",\n  required: true,\n  label: \"说明\",\n  value: \"19:01:00\"\n}]\n```\n\n| props | 说明                                       | 类型                                     | 默认值  |\n| ----- | ---------------------------------------- | -------------------------------------- | ---- |\n| type  | 使用配置时**必填**，直接使用JSX可选。type取值`time`或`time-picker`，只有一种值。 | string                                 | time |\n| value | string类型为`HH:mm:ss`（19:01:00），moment类型`new moment(value,\"HH:mm:ss\")`。 | string或 [moment](http://momentjs.com/) | 无    |\n\n参考[Antd.TimePicker](https://ant.design/components/time-picker-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### DatePicker\n\n```jsx\n//jsx\n\u003cDatePicker required label=\"说明\" value=\"2017-03-30\"/\u003e\n//配置\n[{\n  type: \"date\",\n  required: true,\n  label: \"说明\",\n  value: \"2017-03-30\"\n}]\n```\n\n| props | 说明                                       | 类型                                     | 默认值  |\n| ----- | ---------------------------------------- | -------------------------------------- | ---- |\n| type  | 使用配置时**必填**，直接使用JSX可选。type取值`date`或`date-picker`，只有一种值。 | string                                 | date |\n| value | string类型取值跟moment的[format](http://momentjs.cn/docs/#/displaying/format/)格式一致（如YYYY-MM-DD对应2017-03-30），moment类型`new moment(value,props.format)`。 | string或 [moment](http://momentjs.com/) | 无    |\n\n参考[Antd.DatePicker](https://ant.design/components/date-picker-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### MonthPicker\n\n```jsx\n//jsx\n\u003cMonthPicker required label=\"说明\" value=\"2017-03\"/\u003e\n//配置\n[{\n  type: \"month\",\n  required: true,\n  label: \"说明\",\n  value: \"2017-03\"\n}]\n```\n\n| props | 说明                                       | 类型                                     | 默认值   |\n| ----- | ---------------------------------------- | -------------------------------------- | ----- |\n| type  | 使用配置时**必填**，直接使用JSX可选。type取值`month`或`month-picker`，只有一种值。 | string                                 | month |\n| value | string类型为`YYYY-MM`（2017-03），moment类型`new moment(value,\"YYYY-MM\")`。 | string或 [moment](http://momentjs.com/) | 无     |\n\n参考[Antd.DatePicker](https://ant.design/components/date-picker-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### RangePicker\n\n```jsx\n//jsx\n\u003cRangePicker required label=\"说明\" value={[\"2017-03-01\",\"2017-03-03\"]}/\u003e\n//配置\n[{\n  type: \"month\",\n  required: true,\n  label: \"说明\",\n  value: [\"2017-03-01\",\"2017-03-03\"]\n}]\n```\n\n| props | 说明                                       | 类型     | 默认值   |\n| ----- | ---------------------------------------- | ------ | ----- |\n| type  | 使用配置时**必填**，直接使用JSX可选。type取值`range`或`range-picker`，只有一种值。 | string | range |\n| value | 数组中的取值，参考DataPicker的value                | array  | 无     |\n\n参考[Antd.DatePicker](https://ant.design/components/date-picker-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### CheckboxGroup\n\n```jsx\n//jsx\n\u003cCheckboxGroup required label=\"说明\" options={[]}/\u003e\n//配置\n[{\n  type: \"checkbox-group\",\n  required: true,\n  label: \"说明\",\n  options={[]}\n}]\n```\n\n| props | 说明                                       | 类型     | 默认值            |\n| ----- | ---------------------------------------- | ------ | -------------- |\n| type  | 使用配置时**必填**，直接使用JSX可选。type取值`checkbox-group`，只有一种值。 | string | checkbox-group |\n\n参考[Antd.Checkbox](https://ant.design/components/checkbox-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### RadioGroup\n\n```jsx\n//jsx\n\u003cRadioGroup required label=\"说明\" options={[]}/\u003e\n//配置\n[{\n  type: \"checkbox-group\",\n  required: true,\n  label: \"说明\",\n  options={[]}\n}]\n```\n\n| props   | 说明                                       | 类型     | 默认值         |\n| ------- | ---------------------------------------- | ------ | ----------- |\n| type    | 使用配置时**必填**，直接使用JSX可选。type取值`radio-group`，只有一种值。 | string | radio-group |\n| options | 配置选项                                     |        |             |\n\n参考[Antd.Radio](https://ant.design/components/radio-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\nRadioGroup的`props.options`结构如下：\n\n```js\n[\n  { label: 'Apple', value: 'Apple' },\n  { label: 'Pear', value: 'Pear' },\n  { label: 'Orange', value: 'Orange' },\n]\n```\n\n#### Password\n\n````jsx\n//jsx\n\u003cPassword required label=\"密码\" rePassword={true}/\u003e\n//配置\n[{\n  type: \"checkbox-group\",\n  required: true,\n  label: \"说明\",\n  rePassword: true\n}]\n````\n\n| props               | 说明                                       | 类型                  | 默认值      |\n| ------------------- | ---------------------------------------- | ------------------- | -------- |\n| type                | 使用配置时**必填**，直接使用JSX可选。type取值`password`，只有一种值。 | string              | password |\n| rePassword          | 是否重复验证密码                                 | boolean             | false    |\n| onlyLetterAndNumber | 只允许输入英文字母和数字结合的密码                        | boolean             | true     |\n| min                 | 输入字符最小长度                                 | number  \\|\\| string | 否        |\n| max                 | 输入字符最大长度                                 | number  \\|\\| string | 无        |\n\n参考[Antd.Input](https://ant.design/components/input-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n#### Cascader\n\n```jsx\n//jsx\n\u003cCascader required label=\"密码\" options={[]}/\u003e\n//配置\n[{\n  type: \"cascader\",\n  required: true,\n  label: \"说明\",\n  options: [],\n}]\n```\n\n| props | 说明                                       | 类型     | 默认值      |\n| ----- | ---------------------------------------- | ------ | -------- |\n| type  | 使用配置时**必填**，直接使用JSX可选。type取值`cascader`，只有一种值。 | string | cascader |\n\n参考[Antd.Cascader](https://ant.design/components/cascader-cn/)。\n公共部分的props请参考，**表单组件公共部分的API**。\n\n### FormBuilderConfiger API\n\n#### FormBuilderConfiger\n\n```jsx\n\u003cFormBuilderConfiger \n  hasNoneTableTitle={ true }\n  onChange={ this.onConfigerChange }\n  config={\n    this.state.table\n  }\n  title=\"表格字段配置\"\n  selectSourceDataMap={\n    selectSourceDataMap\n  }\n/\u003e\n```\n\n| props                | 说明                                       | 类型       | 默认值                         |\n| -------------------- | ---------------------------------------- | -------- | --------------------------- |\n| title                | 第一级table的title，hasNoneTableTitle为true时隐藏 | string   | 字段管理                        |\n| config               | 配置数据，只要config改变了都会以新的config重新渲染（父组件传进来，跟formBuilder的config有细微区别） | array    | []                          |\n| onChange             | 配置数据变化时触发的回调函数（这里的配置数据与父组件传进来的是相互独立的）,function(data01,data02)，data01是formBuilderConfiger的配置数据，data02是formBuilder的配置数据 | function | 无                           |\n| hasNoneTableTitle    | antd table title是否显示（两种添加新字段的方式）         | boolean  | true                        |\n| selectSourceDataMap  | 拉选择数据源选项                                 | array    | 无                           |\n| fieldAddedOperation  | fieldAddedOperation 添加字段的按钮或图标（react组件）  | object   | `\u003cAntd.Icon type=\"plus\" /\u003e` |\n| canNotDeleteFunction | 开启不可删除选项                                 | boolean  | false                       |\n| readOnlyFunction     | 开启只读选项                                   | boolean  | false                       |\n\n`props.config`\n**formBuilder和formBuilderConfiger他们的区别在于type为array类型的时候，formBuilder的children需要再包一层数组，`children: [] =\u003e children: [[]]`。还有FormBuilderConfiger中的config每个数据都要设置key值**。\n\n```js\nvar config = [\n  {\n    name: \"physics\",\n    label: \"服务器物理属性表\",\n    type: \"object\",\n    required: true,\n    children: [\n      {\n        name: \"power_num\",\n        type: \"number\",\n        required: true,\n        label: \"电源个数\",\n        value: \"10\",\n        read_only: true,\n        can_not_delete: true,\n      },\n      {\n        name: \"rack_digit\",\n        type: \"number\",\n        required: true,\n        label: \"机架位数\",\n      },\n      {\n        name: \"dist_list\",\n        type: \"array\",\n        required: true,\n        label: \"硬盘列表\",\n        children: [\n          {\n            name: \"brand\",\n            type: \"string\",\n            required: true,\n            label: \"硬盘品牌\",\n          },\n          {\n            name: \"model\",\n            type: \"string\",\n            required: true,\n            label: \"硬盘型号\",\n          },\n        ],\n      },\n    ]\n  }\n]\n```\n\n#### FormBuilderConfiger.create()\n\n高阶组件方式\n\n```jsx\nclass CustomizedForm extends React.Component {}\nCustomizedForm = FormBuilderConfiger.create()(CustomizedForm);\n```\n\n类装饰器方式\n\n```jsx\n@FormBuilderConfiger.create()\nclass CustomizedForm extends React.Component {}\n```\n\n经过 `FormBuilderConfiger.create()` 包装的组件将会自带 `this.props.formBuilderConfiger` 属性，`this.props.formBuilderConfiger` 提供的 API 如下：\n\n| props                                    | 说明                                       | 类型       | 默认值           |\n| :--------------------------------------- | :--------------------------------------- | :------- | :------------ |\n| formBuilderConfiger.openAddFieldDialogEvent | 打开最上层添加字段的弹窗，一般在hasNoneTableTitle设置为true时需要用到。 | function | function(e){} |\n\n#### FormBuilderConfiger.formBuilderConfigAdapter\n\nformBuilderConfiger配置转换成FormBuilder的config配置，他们的区别在于type为array类型的时候，formBuilder的children需要再包一层数组，`children: [] =\u003e children: [[]]`。\n\n| 参数   | 说明                     | 类型    | 默认值  |\n| :--- | :--------------------- | :---- | :--- |\n| data | formBuilderConfiger的配置 | array | 无    |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdog-days%2Fantd-react-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdog-days%2Fantd-react-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdog-days%2Fantd-react-form-builder/lists"}