antd-form-component

antd-form-component

本项目重构于antd-react-form-builder，删除了嵌套表单，优化了组件用法。

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

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

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

安装

目前只支持通过npm安装。

npm install antd-form-component --save

兼容

依赖包

antd支持到v2.x.x，react支持v15.x.x。

antd@3.x.x有一个bug，select的mode="tags"和mode="combobox"回车会触发form提交。

antd@2.x.x没有这种问题。

浏览器

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

IE11需要使用polyfills，可以使用下面的：

if (typeof Promise === 'undefined') {
  // Rejection tracking prevents a common issue where React gets into an
  // inconsistent state due to an error, but it gets swallowed by a Promise,
  // and the user has no idea what causes React's erratic future behavior.
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object.assign');
//兼容父类构造器不运行问题
(function() {
  var testObject = {};
  if (!(Object.setPrototypeOf || testObject.__proto__)) {
    var nativeGetPrototypeOf = Object.getPrototypeOf;

    Object.getPrototypeOf = function(object) {
      if (object.__proto__) {
        return object.__proto__;
      } else {
        return nativeGetPrototypeOf.call(Object, object);
      }
    };
  }
})();
//兼容startsWith问题
if (typeof String.prototype.startsWith != 'function') {
  String.prototype.startsWith = function(prefix) {
    return this.slice(0, prefix.length) === prefix;
  };
}

需要安装相应的包。

npm i -S promise object.assign

使用

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

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

需要而外引入css文件

import "antd/dist/antd.css";
import 'antd-form-component/lib/assets/css/style.css';
//也可以直接使用less
//import 'antd-form-component/lib/assets/css/style.less';

如果使用antd@2.x.x版本，需要而外引入下面的css。

import 'antd-form-component/lib/assets/css/[e-mail]';
//也可以直接使用less
import 'antd-form-component/lib/assets/css/[e-mail]';

简单使用

import React from 'react';
import { Form, Input } from 'antd-form-component';
import { Button } from 'antd';

import "antd/dist/antd.css";
import 'antd-form-component/lib/assets/css/style.css';

@Form.create()
class Test extends React.Component {
  render() {
    return (
      <Form
        onSubmit={e => {
          e.preventDefault();
          e.stopPropagation();
          form.validateFields((err, values) => {
            console.log(err, values);
          });
        }}
        hasFeedback
        size="default"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
      >
        <Input name="text" required label="Text" value="text" />
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form>
    );
  }
}

国际化

antd/lib/locale-provider/zh_CN结构如下：

//afc前缀是antd-form-component的首字母缩写
//避免跟antd的命名重复
export default {
  afcCommon: {
    isRequired: '请输入%s',
    //中文字符算两个英文字符
    charactersBetwteen: '请输入%d到%d个长度的字符',
    charactersMin: '字符长度不能小于%d',
    charactersMax: '字符长度不能大于%d',
    charactersOnlyLetter: '请输入英文字母',
  },
  afcInput: {
    emailFormat: '电子邮件格式不正确',
    urlFormat: 'url格式不正确',
  },
  afcPassword: {
    checkLabel: '确认密码',
    checkErrorMsg: '您两次输入的密码不一致',
    formatErrorMsg: '密码必须是字母和数字结合',
  },
};

全局

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

import React from 'react';
import { LocaleProvider } from 'antd';
import AntdEnUS from 'antd/lib/locale-provider/en_US';
import AntdFormComponentENUS from 'antd-form-component/lib/locale-provider/es_US';
//整合Antd和Form的国际化语言
let enUS = Object.assign({},AntdEnUS,AntdFormComponentENUS);
class Test extends React.Component {
	return (
    <LocaleProvider locale={enUS}>
      <App />
    </LocaleProvider>
  );
  
}

通过Form

import React from 'react';
import { Form, Input } from 'antd-form-component';
import AntdFormComponentENUS from 'antd-form-component/lib/locale-provider/es_US';

import "antd/dist/antd.css";
import 'antd-form-component/lib/assets/css/style.css';

@Form.create()
class Test extends React.Component {
  render() {
    return (
      <Form locale={AntdFormComponentENUS}>
        <Input name="text" required label="Text" value="text" />
      </Form>
    );
  }
}

通过单个组件

import React from 'react';
import { Form, Input } from 'antd-form-component';
import AntdFormComponentENUS from 'antd-form-component/lib/locale-provider/es_US';

import 'antd/dist/antd.css';
import 'antd-form-component/lib/assets/css/style.css';

@Form.create()
class Test extends React.Component {
  render() {
    return (
      <Form>
        <Input
          name="email"
          required
          label="Email"
          type="email"
          locale={{ emailFormat: '电子邮件格式不正确' }}
        />
      </Form>
    );
  }
}

API

主页所有antd-form-component组件都是不可控组件，只能通过Form.create()提供的this.props.form进行各种处理。

处理Form组件外，每个组件默认都包含antd Form.Item。

除了新增的props进行说明，其他的没有新增的都跟原来的antd表单组件一致。

Form

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

props	说明	类型	必填	默认值
size	统一设置组件size	string	否	default
hasFeedback	统一设置组件的hasFeedback	boolean	否	false
labelCol	统一设置组件的labelCol	object	否	无
wrapperCol	统一设置组件的wrapperCol	object	否	无
trigger	统一设置trigger，有onChange和onBlur两种	string	否	onChange
其他props	其他props完全跟antd Form一致

上面的props优先级是最低的，组件传递的props可覆盖上面的属性，如：

<Form
  size="default"
  labelCol={{ span: 4 }}
  wrapperCol={{ span: 20 }}
  hasFeedback
>
  <Form.Item  
    hasFeedback={false} 
    labelCol={{ span: 2 }}
  	wrapperCol={{ span: 22 }}
  >
  	<Input name="test" size="small"/>
  </Form.Item>
</Form>

Form.create()

基本跟antd的Form.create()一样。

这里出Form.create()没有options参数。

方法	说明	类型
getFieldDecorator	用于和表单进行双向绑定，详见下方描述
getFieldError	获取某个输入控件的 Error	Function(name)
getFieldsError	获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error	Function([names: string[]])
getFieldsValue	获取一组输入控件的值，如不传入参数，则获取全部组件的值	Function([fieldNames: string[]])
getFieldValue	获取一个输入控件的值	Function(fieldName: string)
resetFields	重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件	Function([names: string[]])
setFields	设置一组输入控件的值与 Error	Function({ fieldName:{ value: any, errors: Error } })
setFieldsValue	设置一组输入控件的值（注意：不要在 componentWillReceiveProps 内使用，否则会导致死循环）	Function({ fieldName:value }
validateFields	校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件	Function([fieldNames: string[]], options: object, callback: Function(errors, values))

除了getFieldDecorator用法跟antd的不一样，上面其他方法的用法一样。

getFieldDecorator(id, props)

getFieldDecorator跟antd的用法不一样。

一般都用不上这个函数，除非需要新定义组件，如：

form.getFieldDecorator('inputnumber', {
  	//这些是props参数
    label: 'inputnumber',
    initialValue: '2',
    required: true,
 })(<Antd.InputNumber />)
//这个跟<AntdFormComponent.InputNumber />是一样的。

props参数跟组件的一样，详细请参考下面表单组件公共props。

Form.Item

antd-form-component也提供了Form.Item作为传递props到antd的Form.Item（每个antd-form-component组件都是包含了antd的From.Item）。

<Form>
  <Input
    name="email"
    required
    label="Email"
    type="email"
    locale={{ emailFormat: '电子邮件格式不正确' }}
  />
</Form>

上面的代码跟下面代码作用是一样的，不过多了一项可以传递props到antd的Form.Item。

<Form>
	<Form.Item 
  	//这里面可以传递prop到  
    hasFeedBack
  >
    <Input
      name="email"
      required
      label="Email"
      type="email"
      locale={{ emailFormat: '电子邮件格式不正确' }}
    />
  </Form.Item>
</Form>

表单组件公共props

props	说明	类型	必填	默认值
name	input、select等的的name（跟原生的html一样），同时async-validator要用到（表单验证），取值要用到，要唯一。	string	是	无
label	表单项左边的展示名称	string	否	无
value	初始化的value设置，这里没有defaultValue的概念。已废弃	any	否	无
initialValue	初始化的value设置，替换上面value。	any	否	无
required	表单项是否必填（这个验证会合并到rules中的）	boolean	否	无
rules	验证规则请参考下面props.rules的说明。	array	否	无
noFormItem	是否渲染antd的Form.Item
trigger	有onChange和onBlur两种	string	否	onChange
其他props	其他props继承antd的中相应的表单组件，defaultValue和value除外。

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);
    }
  }
]

新增props的组件

Input

<Input name="text" required label="Text" value="text" />
<Input label="Email" name="email" required type="email" />
<Input label="Url" name="url" required type="url" />
<Input label="File" name="file" required type="file" />
<Input.TextArea autosize label="描述" name="textarea" required />
<Input.Group compact label={'InputGroup'}>
  <Select name="address-type" style={{ width: '30%' }} value="Home">
    <Option value="Home">Home</Option>
    <Option value="Company">Company</Option>
  </Select>
  <Input
    name="info"
    style={{ width: '70%' }}
    placeholder="请填写留言"
    required
    min={2}
   />
</Input.Group>

新增的props:

props	说明	类型	必填	默认值
type	表单子项类型	string	否	text
onlyLetter	是否只允许输入英文字母	boolean	否	false
min	输入字符最小长度	number	否	无
max	输入字符最大长度	number	否	无

其他参考Antd.Input。

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

type类型如下：

type类型	说明
email	自带email格式验证
url	自带urll格式验证
hidden	隐藏Input

还有Input.TextArea、Input.Search 、Input.Group用法都跟antd的一样。

新增组件

ArrayInput

<ArrayInput name="array" required label="Array" value={[1, 2, 3]} />

props

props	说明	类型	默认值
value	value值	string array	无
其他props	继承antd-form-component Inputprops

Password

<Password required label="密码" checkPassword/>

props

props	说明	类型	默认值
type	使用配置时必填，直接使用JSX可选。type取值password，只有一种值。	string	password
checkPassword	是否重复验证密码	boolean	false
onlyLetterAndNumber	只允许输入英文字母和数字结合的密码	boolean	true
其他props	继承antd-form-component Inputprops