antd-react-form-builder v0.6.9

antd-react-form-builder

之所以写了这个项目有以下几点原因：

• Antd的表单验证是会触发整个组件渲染，（使用Form.create()装饰器后和getFieldDecorator后）
• 默认的Antd表单组件是不自带验证的，需要使用配套的getFieldDecorator装饰过后才可以验证。
• 没有嵌套的表单可用。

基于以上原因，就有了本项目。

本项目是基于Antd的antd-react-form-builder，既可以使用配置生成表单（整合了表单验证，单并不采用getFieldDecorator），也支持直接是使用JSX。（两种方式都支持，就像使用react-router一样）

安装

目前只支持通过npm安装。

npm install antd-react-form-builder --save

兼容

兼容IE10以上，兼容谷歌、Safari、火狐等浏览器最新版本。

使用

antd-react-form-builder是基于antd form进行了一些简便封装，具体antd from用法还是要使用者自己去了解，这里就不多说。antd-react-form-builder的表单项都包含了antd 的<FormItem \>，表单验证直接通过表单组件props.rules传进来。详细的说明请看下面的API。

可以直接参考本项目中的demo。

需要而外引入css文件

import "antd/dist/antd.css"
import "antd-react-form-buider/lib/style/style.css"

或者

import "antd-react-form-buider/lib/style/index"

JSX直接使用

import React from 'react'
import {
  FormBuilder,
  Input,
} from "antd-react-form-buider"
import {
  Form,
} from "antd"

@FormBuilder.create()
export default class Container extends React.Component {
  handleOnsubmit(e){
    e.preventDefault();
    this.props.formBuilder &&
    this.props.formBuilder.validateFields((err, values) => {
      console.debug('values: ', values);
      if(err){
        console.debug("表单错误",err)
        return; 
      }else {
        console.debug('表单值: ', values);
      }
    });
  }
  render(){
    return (
  	  <FormBuilder
        onSubmit={ this.handleOnsubmit }
        size="default"
        hasFeedback={ true }
        horizontal 
      >
        <Input 
          type="text" 
          name="text"
          rules={ 
            [
              {
                "required": true,
                "message": "请不要留空"
              }
            ]
          }
          value="ddd"
          placeholder="请输入！"
        />
        <Input 
          type="text" 
          name="text"
          required
          value="ddd"
		 label="随意"
          placeholder="请输入！"
        />
        <Form.Item>
          <Button htmlType="submit">
            提交
          </Button>
        </Form.Item>
  	  </FormBuilder>
  	)
  }
}

通过配置使用（简单的）

import React from 'react'
import {
  FormBuilder,
  Input,
} from "antd-react-form-buider"
let config = [
  {
    type: "text",
    name: "text[]",
    //规则验证，必填验证可以直接使用required
    rules: [
      {
        required: true,
        "message": "请不要留空"
      }
    ],
    //antd Form.Item props，formItemProps.label可以直接使用label="xxx"
    formItemProps: {
      label: "随意",
      labelCol: { "span": 0 }
    },
    value: "dddd",
    placeholder: "请输入！"
  },
  {
    type: "text",
    name: "text",
    required
    label: "随意"
    value: "dddd",
    placeholder: "请输入！"
  },
]
@FormBuilder.create()
class Container extends React.Component {
  handleOnsubmit(e){
    e.preventDefault();
    this.props.formBuilder &&
    this.props.formBuilder.validateFields((err, values) => {
      console.debug('values: ', values);
      if(err){
        console.debug("表单错误",err)
        return; 
      }else {
        console.debug('表单值: ', values);
      }
    });
  }
  render(){
    return (
  	  <FormBuilder
        config={config}
        onSubmit={ this.handleOnsubmit }
        size="default"
        hasFeedback={ false }
        horizontal 
      />
  	)
  }
}
export default Container;

混合使用

import React from 'react'
import {
  FormBuilder,
  Input,
} from "antd-react-form-buider"
let config = [
  {
    type: "text",
    name: "text",
    required
    label: "随意"
    value: "dddd",
    placeholder: "请输入！"
  },
]
@FormBuilder.create()
class Container extends React.Component {
  handleOnsubmit(e,err,values){
    e.preventDefault();
    console.debug('表单值: ', values);
    if(err){
      console.debug("表单错误",err)
      return; 
    }
  }
  render(){
    return (
  	  <FormBuilder
        config={config}
        onSubmit={ this.handleOnsubmit }
        size="default"
        hasFeedback={ false }
        horizontal 
      >
        <Input 
          type="text" 
          name="text"
          required
          value="ddd"
		 label="随意"
          placeholder="请输入！"
        />
        <Form.Item>
          <Button htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </FormBuilder>
  	)
  }
}
export default Container;

国际化

跟antd的国际化用法一致，请参考https://ant.design/docs/react/i18n-cn。

import AntdEnUS from 'antd/lib/locale-provider/en_US'
import FormBuilderEnUS from '../lib/locale-provider/es_US'
//整合Antd和FormBuilder的国际化语言
let enUS = Object.assign({},AntdEnUS,FormBuilderEnUS)
return (
  <LocaleProvider locale={enUS}>
    <App />
  </LocaleProvider>
);

FormBuilder API

表单验证的API，请看antd的表单验证和async-validator（antd 采用了这个）。

FormBuilder

<FormBuilder
  config={config}
  onSubmit={ this.handleOnsubmit }
  size="default"
  hasFeedback={ false }
>
  <Input name="test"/>
</FormBuilder>

config格式如下，可以参考后续的每个表单项props API：

//简单的
var simpleConfig = [
  {
    key: "name",
    name: "physics",
    label: "服务器物理属性表",
    required: true,
    type: "number",
  }
]
//嵌套的，关键看children
//模型
var config = [
  {
    key: "name",
    name: "physics",
    label: "服务器物理属性表",
    required: true,
    type: "object",
    children: [
      {...},
      {...},
    ],
  },
  {
    key: "name",
    name: "physics",
    label: "服务器物理属性表",
    required: true,
    type: "array",
    children: [
      [...],
      [...],
    ],
  },
]
//示例
var config = [
  {
    key: util.getUniqueKey(),
    name: "physics",
    label: "服务器物理属性表",
    type: "object",
    required: true,
    children: [
      {
        name: "power_num",
        type: "number",
        required: true,
        label: "电源个数",
        value: "10",
        read_only: true,
        can_not_delete: true,
      },
      {
        name: "rack_digit",
        type: "number",
        required: true,
        label: "机架位数",
      },
      {
        name: "dist_list",
        type: "array",
        required: true,
        label: "硬盘列表",
        children: [
          [
            {
              name: "brand",
              type: "string",
              required: true,
              label: "硬盘品牌",
            },
            {
              name: "model",
              type: "string",
              required: true,
              label: "硬盘型号",
            },
          ],
		 [
            {
              name: "brand1",
              type: "string",
              required: true,
              label: "硬盘品牌1",
            },
            {
              name: "model1",
              type: "string",
              required: true,
              label: "硬盘型号1",
            },
          ],
        ],
      },
    ]
  }
]

结构说明

type说明 其中dropdown、table、object是特殊的类型。

FormBuilder.create()

高阶组件方式

class CustomizedForm extends React.Component {}
CustomizedForm = FormBuilder.create()(CustomizedForm);

类装饰器方式

@FormBuilder.create()
class CustomizedForm extends React.Component {}

类似antd的FormBuilder.create()。经过 FormBuilder.create() 包装的组件将会自带 this.props.formBuilder 属性，this.props.formBuilder 提供的 API 如下：

FormBuilder.valuesToConfig

formBuilderConfig value赋值（根据FormBuilder的表单结构所存储的值来赋值） 。当我们需要为嵌套的表单赋值时，使用这个方法（setFieldsValue不够用了）。

//配置
var config = [
  {
    key: 1,
    type: "email",
    required: true,
    label: "说明",
    placeholder: "请输入"
  },
  {
    key: 2,
    type: "email2",
    required: true,
    label: "说明",
    placeholder: "请输入"
  },
]
var values = {
  email: "test@163.com",
  email2: "test2@163.com",
}
config = FormBuilder.valuesToConfig(config,values);
...
return (
  <FromBuilder config={config}/>
)
...

表单组件公共部分的API

props.rules大致结构如下，更高级请参考 async-validator。

[
  //async-validator自带的验证规则
  { type: "string", required: true,message: "必填项"},
  //自定义验证规则
  {
    validator(rule, value, callback, source, options) {
      var errors = [];
      // test if email address already exists in a database
      // and add a validation error to the errors array if it does
      callback(errors);
    }
  }
]

Input

//jsx
<Input type="email" required label="说明" placeholder="请输入"/>
//配置
[{
  type: "email",
  required: true,
  label: "说明",
  placeholder: "请输入"
}]

参考Antd.Input。

公共部分的props请参考，表单组件公共部分的API。

type类型如下：

InputNumber

//jsx
<InputNumber required label="说明" placeholder="请输入"/>
//配置
[{
  type: "number",
  required: true,
  label: "说明",
  placeholder: "请输入"
}]

参考Antd.Input。 公共部分的props请参考，表单组件公共部分的API。

Select

//jsx
<Select required label="说明" options={[]}/>
//配置
[{
  type: "select",
  required: true,
  label: "说明",
  options: []
}]

参考Antd.Select。 公共部分的props请参考，表单组件公共部分的API。 selectprops.options结构如下：

[
  {
    value: "shenzhen",
    label: "深圳"
  },
  {
    value: "beijing",
    label: "北京"
  },
]

selectprops.group结构如下：

[
  {
    label: "广东省",
    options: [
      {
        value: "shenzen",
        label: "深圳"
      }
    ] 
  },
  {
    label: "广东省",
    options: [
      {
        value: "shenzen2",
        label: "深圳2"
      }
    ] 
  },
]

TimePicker

//jsx
<TimePicker required label="说明" value="19:01:00"/>
//配置
[{
  type: "time",
  required: true,
  label: "说明",
  value: "19:01:00"
}]

参考Antd.TimePicker。 公共部分的props请参考，表单组件公共部分的API。

DatePicker

//jsx
<DatePicker required label="说明" value="2017-03-30"/>
//配置
[{
  type: "date",
  required: true,
  label: "说明",
  value: "2017-03-30"
}]

参考Antd.DatePicker。 公共部分的props请参考，表单组件公共部分的API。

MonthPicker

//jsx
<MonthPicker required label="说明" value="2017-03"/>
//配置
[{
  type: "month",
  required: true,
  label: "说明",
  value: "2017-03"
}]

参考Antd.DatePicker。 公共部分的props请参考，表单组件公共部分的API。

RangePicker

//jsx
<RangePicker required label="说明" value={["2017-03-01","2017-03-03"]}/>
//配置
[{
  type: "month",
  required: true,
  label: "说明",
  value: ["2017-03-01","2017-03-03"]
}]

参考Antd.DatePicker。 公共部分的props请参考，表单组件公共部分的API。

CheckboxGroup

//jsx
<CheckboxGroup required label="说明" options={[]}/>
//配置
[{
  type: "checkbox-group",
  required: true,
  label: "说明",
  options={[]}
}]

参考Antd.Checkbox。 公共部分的props请参考，表单组件公共部分的API。

RadioGroup

//jsx
<RadioGroup required label="说明" options={[]}/>
//配置
[{
  type: "checkbox-group",
  required: true,
  label: "说明",
  options={[]}
}]

参考Antd.Radio。 公共部分的props请参考，表单组件公共部分的API。

RadioGroup的props.options结构如下：

[
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
]

Password

//jsx
<Password required label="密码" rePassword={true}/>
//配置
[{
  type: "checkbox-group",
  required: true,
  label: "说明",
  rePassword: true
}]

参考Antd.Input。 公共部分的props请参考，表单组件公共部分的API。

Cascader

//jsx
<Cascader required label="密码" options={[]}/>
//配置
[{
  type: "cascader",
  required: true,
  label: "说明",
  options: [],
}]

参考Antd.Cascader。 公共部分的props请参考，表单组件公共部分的API。

FormBuilderConfiger API

FormBuilderConfiger

<FormBuilderConfiger 
  hasNoneTableTitle={ true }
  onChange={ this.onConfigerChange }
  config={
    this.state.table
  }
  title="表格字段配置"
  selectSourceDataMap={
    selectSourceDataMap
  }
/>

props.config formBuider和formBuilderConfiger他们的区别在于type为array类型的时候，formBuilder的children需要再包一层数组，children: [] => children: [[]]。还有FormBuilderConfiger中的config每个数据都要设置key值。

var config = [
  {
    name: "physics",
    label: "服务器物理属性表",
    type: "object",
    required: true,
    children: [
      {
        name: "power_num",
        type: "number",
        required: true,
        label: "电源个数",
        value: "10",
        read_only: true,
        can_not_delete: true,
      },
      {
        name: "rack_digit",
        type: "number",
        required: true,
        label: "机架位数",
      },
      {
        name: "dist_list",
        type: "array",
        required: true,
        label: "硬盘列表",
        children: [
          {
            name: "brand",
            type: "string",
            required: true,
            label: "硬盘品牌",
          },
          {
            name: "model",
            type: "string",
            required: true,
            label: "硬盘型号",
          },
        ],
      },
    ]
  }
]

FormBuilderConfiger.create()

高阶组件方式

class CustomizedForm extends React.Component {}
CustomizedForm = FormBuilderConfiger.create()(CustomizedForm);

类装饰器方式

@FormBuilderConfiger.create()
class CustomizedForm extends React.Component {}

经过 FormBuilderConfiger.create() 包装的组件将会自带 this.props.formBuilderConfiger 属性，this.props.formBuilderConfiger 提供的 API 如下：

FormBuilderConfiger.formBuilderConfigAdapter

formBuilderConfiger配置转换成FormBuilder的config配置，他们的区别在于type为array类型的时候，formBuilder的children需要再包一层数组，children: [] => children: [[]]。