Package Exports

rc-form

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-form

React High Order Form Component.

Note: This is unstable, under development now.

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/form/examples/

Feature

support ie8,ie8+,chrome,firefox,safari

install

Usage

import { createForm } from 'rc-form';

@createForm()
class Form  extends React.Component {
  render() {
    let errors;
    const {getFieldProps, getFieldError, isFieldValidating} = props.form;
    return (<div>
    <input {...getFieldProps('normal')}/>
    <input {...getFieldProps('required',{
      rules:[{required:true}]
    })}/>
    {(errors = getFieldError('required')) ? errors.join(',') : null}
    </div>)
  }
}

Function: createForm(formOption)

formOption.onFieldsChange(props, fields)

Called when field changed, you can dispatch fields to redux store.

formOption.mapPropsToFields(props)

convert value from props to fields. used for read fields from redux store.

createForm() will return another function:

React.Component: function(WrappedComponent: React.Component)

Will pass a object as prop form with the following members to WrappedComponent:

Object: getFieldProps(name, option)

Will create props which can be set on a input/InputComponent which support value and onChange interface.

After set, this will create a binding with this input.

name

type: String. this input's unique name.

option.valuePropName

prop name of component's value field, eg: checkbox should set checked ...

option.initialValue

the initial value of current component.

option.normalize(value, prevValue, allValues)

return normalized value

option.validateTrigger

type: String. event which is listened to validate. Default to 'onChange', set to false to only validate when call props.validateFields.

option.trigger

type: String. event which is listened to collect form data. Default to 'onChange', set to false to stop collect form data.

option.rules

type: Object[]. validator rules. see: https://github.com/yiminghe/async-validator

getFieldsValue([fieldNames: String[]])

Get fields value by fieldNames.

setFieldsValue(obj: Object)

set fields value by kv object.

setFields(obj: Object)

set fields by kv object. each field can contain errors and value member.

validateFields([fieldNames: String[]], callback: Function(errors, values))

Validate and get fields value by fieldNames.

String[]: getFieldError(name)

Get input's validate errors.

Bool: isFieldValidating(name)

Whether this input is validating.

resetFields([names: String[]])

reset specified inputs. defaults to all.

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-form is released under the MIT license.