Necessarily Precedes Mischief

    antd-form-component

    0.2.2 • Public • Published

    antd-form-component

    npm package NPM downloads

    本项目重构于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/style@2.x.x.css';
    //也可以直接使用less
    import 'antd-form-component/lib/assets/css/style@2.x.x.less';

    简单使用

    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的中相应的表单组件,defaultValuevalue除外。

    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-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

    Keywords

    none

    Install

    npm i antd-form-component

    DownloadsWeekly Downloads

    2

    Version

    0.2.2

    License

    none

    Unpacked Size

    158 kB

    Total Files

    36

    Last publish

    Collaborators

    • nanges