formsy-antd

formsy-antd

This library is a wrapper for ant-design form components to allow them to be used with formsy-react.

Installation

To add formsy-antd to you package.json and install it, run:

$ npm i formsy-antd

You will also need to add formsy-react if not already installed:

$ npm i formsy-react

Usage

import {Form, FormItem, Input} from 'formsy-antd';
function MyForm() {
  return (
    <Form onSubmit={action('submit')}>
      <FormItem required={true} label="Username">
        <Input
          name="name"
          value="wmzy"
          validations="minLength:4"
          validationError="minLength:4"
        />
      </FormItem>
      <button type="submit">submit</button>
    </Form>
  );
}

And import stylesheets manually:

import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

Use modularized formsy-antd

Use babel-plugin-import (Recommended)

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "formsy-antd", "style": "css" }] // `style: true` for less
  ]
}

This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd-babel-plugin will automatically import stylesheets.

// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from 'formsy-antd';

Manually import

import DatePicker from 'formsy-antd/lib/date-picker';  // for js
import 'antd/lib/date-picker/style/css';        // for css
// import 'antd/lib/date-picker/style';         // that will import less

See also: http://ant.design/docs/react/introduce

Wrap Customized Form Controls

There are some functions help you to wrap customized form controls.

import Input from 'antd/lib/input';
import {mappingChangeEvent, formsyComponent} from 'formsy-antd/lib/util';

export default formsyComponent(mappingChangeEvent(Input, ev => ev.target.value), '');

Examples

See storybook.