Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.

Form

You can align the controls of a form using the layout prop：

• horizontal：to horizontally align the labels and controls of the fields. (Default)
• vertical：to vertically align the labels and controls of the fields.
• inline：to render form fields in one line.

Form fields

A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using <Form.Item />.

<Form.Item {...props}>
  {children}
</Form.Item>

API

Form

more example rc-form。

Form.create(options)

How to use：

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

The following options are available:

If the form has been decorated by Form.create then it has this.props.form property. this.props.form provides some APIs as follows:

Note: Before using getFieldsValue getFieldValue setFieldsValue and so on, please make sure that corresponding field had been registered with getFieldDecorator.

this.props.form.validateFields/validateFieldsAndScroll([fieldNames: string[]], [options: object], callback: Function(errors, values))

Form.createFormField

To mark the returned fields data in mapPropsToFields, demo.

this.props.form.getFieldDecorator(id, options)

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls，the flow of form data will be handled by Form which will cause:

1. You shouldn't use onChange to collect data, but you still can listen to onChange(and so on) events.
2. You can not set value of form control via value defaultValue prop, and you should set default value with initialValue in getFieldDecorator instead.
3. You shouldn't call setState manually, please use this.props.form.setFieldsValue to change value programmatically.

Special attention

1. getFieldDecorator can not be used to decorate stateless component.
2. If you use react@<15.3.0, then, you can't use getFieldDecorator in stateless component: https://github.com/facebook/react/pull/6534

getFieldDecorator(id, options) parameters

More option at rc-form option。

Form.Item

Note:

• If Form.Item has multiple children that had been decorated by getFieldDecorator, help and required and validateStatus can't be generated automatically.
• Before 2.2.0, form controls must be child of Form.Item, otherwise, you need to set help, required and validateStatus by yourself.

Validation Rules

See more advanced usage at async-validator.

Using in TypeScript

import { Form } from 'choerodon-ui';
import { FormComponentProps } from 'choerodon-ui/lib/form';

interface UserFormProps extends FormComponentProps {
  age: number;
  name: string;
}

class UserForm extends React.Component<UserFormProps, any> {

}