antd-form-builder-component

1.1.3 • Public • Published

antd-form-builder-component

npm package NPM downloads

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

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

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

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

安装

目前只支持通过npm安装。

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

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

需要而外引入css文件

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

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

import 'antd-form-builder-component/lib/assets/css/style@2.x.x.css';
//也可以直接使用less
import 'antd-form-builder-component/lib/assets/css/style@2.x.x.less';

简单使用

import React from 'react';
import { Form, Input } from 'antd-form-builder-component';
import { Button } from 'antd';
 
import "antd/dist/antd.css";
import 'antd-form-builder-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-builder-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-builder-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-builder-component';
import AntdFormComponentENUS from 'antd-form-builder-component/lib/locale-provider/es_US';
 
import "antd/dist/antd.css";
import 'antd-form-builder-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-builder-component';
import AntdFormComponentENUS from 'antd-form-builder-component/lib/locale-provider/es_US';
 
import 'antd/dist/antd.css';
import 'antd-form-builder-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-builder-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
其他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-builder-component也提供了Form.Item作为传递props到antd的Form.Item(每个antd-form-builder-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的概念
required 表单项是否必填(这个验证会合并到rules中的) boolean
rules 验证规则请参考下面props.rules的说明。 array
noFormItem 是否渲染antd的Form.Item
其他props 其他props继承antd的中相应的表单组件,defualtValue除外。

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.TextAreaInput.SearchInput.Group用法都跟antd的一样。

新增组件

ArrayInput

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

props

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

Password

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

props

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

Readme

Keywords

none

Package Sidebar

Install

npm i antd-form-builder-component

Weekly Downloads

9

Version

1.1.3

License

none

Unpacked Size

244 kB

Total Files

61

Last publish

Collaborators

  • pauljun