Form 表单

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

表单

我们为 form 提供了以下三种排列方式：

• 水平排列：标签和表单控件水平排列；（默认）
• 垂直排列：标签和表单控件上下垂直排列；
• 行内排列：表单项水平行内排列。

表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

这里我们封装了表单域 <Form.Item /> 。

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

代码演示

水平登录栏

水平登录栏，常用在顶部导航栏中。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Icon, Input, Button } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
​
class HorizontalLoginForm extends React.Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }
​
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
​
  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
​
    // Only show error after a field is touched.
    const userNameError = isFieldTouched('userName') && getFieldError('userName');

登录框

普通的登录框，可以容纳更多的元素。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Icon, Input, Button, Checkbox } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
class NormalLoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
​
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="person_outline" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock_outline" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"

注册新用户

用户填写必须的信息以注册新用户。

​
import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  Input,
  Tooltip,
  Icon,
  Cascader,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
  InputNumber,
} from 'choerodon-ui';
​
const FormItem = Form.Item;
const AutoCompleteOption = AutoComplete.Option;
​
const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
​
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    showLengthInfo: true,

高级搜索

三列栅格式的表单排列方式，常用于数据表格的高级搜索。

有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Row, Col, Input, Button, Icon } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
class AdvancedSearchForm extends React.Component {
  state = {
    expand: false,
  };
​
  handleSearch = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values);
    });
  };
​
  handleReset = () => {
    this.props.form.resetFields();
  };
​
  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };
​
  // To generate mock Form.Item
  getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const children = [];
    for (let i = 0; i < 10; i++) {
      children.push(
        <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
          <FormItem label={`Field ${i}`}>
            {getFieldDecorator(`field-${i}`)(<Input placeholder="placeholder" />)}
          </FormItem>
        </Col>,
      );
    }
    return children;
  }
​
  render() {
    return (
      <Form className="c7n-advanced-search-form" onSubmit={this.handleSearch}>
        <Row gutter={24}>{this.getFields()}</Row>
        <Row>

弹出层中的新建表单

当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Modal, Form, Input, Radio } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
const CollectionCreateForm = Form.create()(
  // eslint-disable-next-line
  class extends React.Component {
    render() {
      const { visible, onCancel, onCreate, form } = this.props;
      const { getFieldDecorator } = form;
      return (
        <Modal
          visible={visible}
          title="Create a new collection"
          okText="Create"
          onCancel={onCancel}
          onOk={onCreate}
        >
          <Form layout="vertical">
            <FormItem label="Title">
              {getFieldDecorator('title', {
                rules: [{ required: true, message: 'Please input the title of collection!' }],
              })(<Input />)}
            </FormItem>
            <FormItem label="Description">
              {getFieldDecorator('description')(<Input type="textarea" />)}
            </FormItem>

动态增减表单项

动态增加、减少表单项。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Icon, Button } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
let uuid = 0;
class DynamicFieldSet extends React.Component {
  remove = k => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one passenger
    if (keys.length === 1) {
      return;
    }
​
    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k),
    });
  };
​
  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(uuid);
    uuid++;
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,

时间类控件

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, DatePicker, TimePicker, Button } from 'choerodon-ui';
​
const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;
​
class TimeRelatedForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
​
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }
​
      // Should format date value before submit.
      const rangeValue = fieldsValue['range-picker'];
      const rangeTimeValue = fieldsValue['range-time-picker'];
      const values = {
        ...fieldsValue,
        'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
        'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
        'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
        'range-time-picker': [
          rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
          rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
        ],
        'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
      };
      console.log('Received values of form: ', values);
    });
  };
​
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const config = {

自定义表单控件

自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

• 提供受控属性 value 或其它与 valuePropName 的值同名的属性。
• 提供 onChange 事件或 trigger 的值同名的事件。
• 不能是函数式组件。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Select, Button } from 'choerodon-ui';
​
const FormItem = Form.Item;
const Option = Select.Option;
​
class PriceInput extends React.Component {
  constructor(props) {
    super(props);
​
    const value = this.props.value || {};
    this.state = {
      number: value.number || 0,
      currency: value.currency || 'rmb',
    };
  }
​
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }
​
  handleNumberChange = e => {
    const number = parseInt(e.target.value || 0, 10);
    if (isNaN(number)) {
      return;

表单数据存储于上层组件

通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到上层组件或者 Redux、dva 中，更多可参考 rc-form 示例。

注意：mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
const CustomizedForm = Form.create({
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      username: Form.createFormField({
        ...props.username,
        value: props.username.value,
      }),
    };
  },
  onValuesChange(_, values) {
    console.log(values);
  },
})(props => {
  const { getFieldDecorator } = props.form;
  return (
    <Form layout="inline">
      <FormItem label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Username is required!' }],
        })(<Input />)}
      </FormItem>
    </Form>
  );
});
​
class Demo extends React.Component {
  state = {
    fields: {

自行处理表单数据

使用 Form.create 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 Form.create 并自行处理数据。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, InputNumber } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
function validatePrimeNumber(number) {
  if (number === 11) {
    return {
      validateStatus: 'success',
      errorMsg: null,
    };
  }
  return {
    validateStatus: 'error',
    errorMsg: 'The prime between 8 and 12 is 11!',
  };
}
​
class RawForm extends React.Component {
  state = {
    number: {
      value: 11,
    },
  };
​
  handleNumberChange = value => {
    this.setState({
      number: {
        ...validatePrimeNumber(value),
        value,

自定义校验

我们提供了 validateStatus help hasFeedback 等属性，你可以不需要使用 Form.create 和 getFieldDecorator，自己定义校验的时机和内容。

1. validateStatus: 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’。
2. hasFeedback：用于给输入框添加反馈图标。
3. help：设置校验文案。

​
import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  Input,
  DatePicker,
  Col,
  TimePicker,
  Select,
  Cascader,
  InputNumber,
} from 'choerodon-ui';
​
const FormItem = Form.Item;
const Option = Select.Option;
​
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
};
​
ReactDOM.render(
  <Form>
    <FormItem
      {...formItemLayout}
      label="Fail"
      validateStatus="error"
      help="Should be combination of numbers & alphabets"
    >
      <Input placeholder="unavailable choice" id="error" />
    </FormItem>
​
    <FormItem {...formItemLayout} label="Warning" validateStatus="warning">
      <Input placeholder="Warning" id="warning" />
    </FormItem>
​
    <FormItem
      {...formItemLayout}
      label="Validating"
      hasFeedback
      validateStatus="validating"
      help="The information is being validated..."
    >
      <Input placeholder="I'm the content is being validated" id="validating" />
    </FormItem>
​
    <FormItem {...formItemLayout} label="Success" hasFeedback validateStatus="success">
      <Input placeholder="I'm the content" id="success" />
    </FormItem>
​
    <FormItem {...formItemLayout} label="Warning" hasFeedback validateStatus="warning">
      <Input placeholder="Warning" id="warning" />
    </FormItem>
​
    <FormItem
      {...formItemLayout}
      label="Fail"
      hasFeedback
      validateStatus="error"

表单联动

使用 setFieldsValue 来动态设置其他控件的值。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Select, Input, Button } from 'choerodon-ui';
​
const FormItem = Form.Item;
const Option = Select.Option;
​
class App extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
​
  handleSelectChange = value => {
    console.log(value);
    this.props.form.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
    });
  };
​
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem label="Note" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
          {getFieldDecorator('note', {
            rules: [{ required: true, message: 'Please input your note!' }],
          })(<Input />)}
        </FormItem>
        <FormItem label="Gender" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
          {getFieldDecorator('gender', {
            rules: [{ required: true, message: 'Please select your gender!' }],
          })(

表单布局

表单有三种布局。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Button, Radio } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
class FormLayoutDemo extends React.Component {
  constructor() {
    super();
    this.state = {
      formLayout: 'horizontal',
    };
  }
​
  handleFormLayoutChange = e => {
    this.setState({ formLayout: e.target.value });
  };
​
  render() {
    const { formLayout } = this.state;
    const formItemLayout =
      formLayout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : null;
    const buttonItemLayout =
      formLayout === 'horizontal'
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : null;
    return (
      <div>
        <Form layout={formLayout}>
          <FormItem label="Form Layout" {...formItemLayout}>
            <Radio.Group defaultValue="horizontal" onChange={this.handleFormLayoutChange}>
              <Radio.Button value="horizontal">Horizontal</Radio.Button>

动态校验规则

根据不同情况执行不同的校验规则。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Button, Checkbox } from 'choerodon-ui';
​
const FormItem = Form.Item;
​
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
class DynamicRule extends React.Component {
  state = {
    checkNick: false,
  };
​
  check = () => {
    this.props.form.validateFields(err => {
      if (!err) {
        console.info('success');
      }
    });
  };
​
  handleChange = e => {
    this.setState(
      {
        checkNick: e.target.checked,
      },
      () => {
        this.props.form.validateFields(['nickname'], { force: true });
      },
    );
  };
​
  render() {

校验其他组件

以上演示没有出现的表单控件对应的校验演示。

​
import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  Select,
  InputNumber,
  Switch,
  Radio,
  Slider,
  Button,
  Upload,
  Icon,
  Rate,
} from 'choerodon-ui';
​
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
​
class Demo extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
​
  normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
​
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem {...formItemLayout} label="Plain Text">
          <span className="c7n-form-text">China</span>
        </FormItem>
        <FormItem {...formItemLayout} label="Select" hasFeedback>
          {getFieldDecorator('select', {
            rules: [{ required: true, message: 'Please select your country!' }],
          })(
            <Select placeholder="Please select a country">
              <Option value="china">China</Option>
              <Option value="use">U.S.A</Option>
            </Select>,
          )}
        </FormItem>
​
        <FormItem {...formItemLayout} label="Select[multiple]">
          {getFieldDecorator('select-multiple', {
            rules: [
              { required: true, message: 'Please select your favourite colors!', type: 'array' },
            ],
          })(
            <Select mode="multiple" placeholder="Please select favourite colors">
              <Option value="red">Red</Option>
              <Option value="green">Green</Option>
              <Option value="blue">Blue</Option>
            </Select>,

API

Form

更多示例参考 rc-form。

Form.create(options)

使用方式如下：

class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);

options 的配置项如下。

经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

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

Form.createFormField

用于标记 mapPropsToFields 返回的表单域数据，例子。

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

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
2. 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。
3. 你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值。

特别注意

1. getFieldDecorator 不能用于装饰纯函数组件。
2. 如果使用的是 react@<15.3.0，则 getFieldDecorator 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534

getFieldDecorator(id, options) 参数

更多参数请查看 rc-form option。

Form.Item

注意：

• 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。
• 2.2.0 之前，只有当表单域为 Form.Item 的子元素时，才会自动生成 help required validateStatus，嵌套情况需要自行设置。

校验规则

更多高级用法可研究 async-validator。

在 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> {
}