Form 表单

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

表单

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

  • 水平排列:标签和表单控件水平排列;(默认)
  • 垂直排列:标签和表单控件上下垂直排列;
  • 行内排列:表单项水平行内排列。

表单域

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

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

  1. <Form.Item {...props}>
  2. {children}
  3. </Form.Item>

代码演示

水平登录栏

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

Form表单 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Icon, Input, Button } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. function hasErrors(fieldsError) {
  6. return Object.keys(fieldsError).some(field => fieldsError[field]);
  7. }
  8. class HorizontalLoginForm extends React.Component {
  9. componentDidMount() {
  10. // To disabled submit button at the beginning.
  11. this.props.form.validateFields();
  12. }
  13. handleSubmit = e => {
  14. e.preventDefault();
  15. this.props.form.validateFields((err, values) => {
  16. if (!err) {
  17. console.log('Received values of form: ', values);
  18. }
  19. });
  20. };
  21. render() {
  22. const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
  23. // Only show error after a field is touched.
  24. const userNameError = isFieldTouched('userName') && getFieldError('userName');

登录框

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

Form表单 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Icon, Input, Button, Checkbox } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. class NormalLoginForm extends React.Component {
  6. handleSubmit = e => {
  7. e.preventDefault();
  8. this.props.form.validateFields((err, values) => {
  9. if (!err) {
  10. console.log('Received values of form: ', values);
  11. }
  12. });
  13. };
  14. render() {
  15. const { getFieldDecorator } = this.props.form;
  16. return (
  17. <Form onSubmit={this.handleSubmit} className="login-form">
  18. <FormItem>
  19. {getFieldDecorator('userName', {
  20. rules: [{ required: true, message: 'Please input your username!' }],
  21. })(
  22. <Input
  23. prefix={<Icon type="person_outline" style={{ color: 'rgba(0,0,0,.25)' }} />}
  24. placeholder="Username"
  25. />,
  26. )}
  27. </FormItem>
  28. <FormItem>
  29. {getFieldDecorator('password', {
  30. rules: [{ required: true, message: 'Please input your Password!' }],
  31. })(
  32. <Input
  33. prefix={<Icon type="lock_outline" style={{ color: 'rgba(0,0,0,.25)' }} />}
  34. type="password"
  35. placeholder="Password"

注册新用户

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

Form表单 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. Form,
  5. Input,
  6. Tooltip,
  7. Icon,
  8. Cascader,
  9. Row,
  10. Col,
  11. Checkbox,
  12. Button,
  13. AutoComplete,
  14. InputNumber,
  15. } from 'choerodon-ui';
  16. const FormItem = Form.Item;
  17. const AutoCompleteOption = AutoComplete.Option;
  18. const residences = [
  19. {
  20. value: 'zhejiang',
  21. label: 'Zhejiang',
  22. children: [
  23. {
  24. value: 'hangzhou',
  25. label: 'Hangzhou',
  26. children: [
  27. {
  28. value: 'xihu',
  29. label: 'West Lake',
  30. },
  31. ],
  32. },
  33. ],
  34. },
  35. {
  36. value: 'jiangsu',
  37. label: 'Jiangsu',
  38. children: [
  39. {
  40. value: 'nanjing',
  41. label: 'Nanjing',
  42. children: [
  43. {
  44. value: 'zhonghuamen',
  45. label: 'Zhong Hua Men',
  46. },
  47. ],
  48. },
  49. ],
  50. },
  51. ];
  52. class RegistrationForm extends React.Component {
  53. state = {
  54. confirmDirty: false,
  55. showLengthInfo: true,

高级搜索

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

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

Form表单 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Row, Col, Input, Button, Icon } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. class AdvancedSearchForm extends React.Component {
  6. state = {
  7. expand: false,
  8. };
  9. handleSearch = e => {
  10. e.preventDefault();
  11. this.props.form.validateFields((err, values) => {
  12. console.log('Received values of form: ', values);
  13. });
  14. };
  15. handleReset = () => {
  16. this.props.form.resetFields();
  17. };
  18. toggle = () => {
  19. const { expand } = this.state;
  20. this.setState({ expand: !expand });
  21. };
  22. // To generate mock Form.Item
  23. getFields() {
  24. const count = this.state.expand ? 10 : 6;
  25. const { getFieldDecorator } = this.props.form;
  26. const children = [];
  27. for (let i = 0; i < 10; i++) {
  28. children.push(
  29. <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
  30. <FormItem label={`Field ${i}`}>
  31. {getFieldDecorator(`field-${i}`)(<Input placeholder="placeholder" />)}
  32. </FormItem>
  33. </Col>,
  34. );
  35. }
  36. return children;
  37. }
  38. render() {
  39. return (
  40. <Form className="c7n-advanced-search-form" onSubmit={this.handleSearch}>
  41. <Row gutter={24}>{this.getFields()}</Row>
  42. <Row>

弹出层中的新建表单

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

Form表单 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, Modal, Form, Input, Radio } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. const CollectionCreateForm = Form.create()(
  6. // eslint-disable-next-line
  7. class extends React.Component {
  8. render() {
  9. const { visible, onCancel, onCreate, form } = this.props;
  10. const { getFieldDecorator } = form;
  11. return (
  12. <Modal
  13. visible={visible}
  14. title="Create a new collection"
  15. okText="Create"
  16. onCancel={onCancel}
  17. onOk={onCreate}
  18. >
  19. <Form layout="vertical">
  20. <FormItem label="Title">
  21. {getFieldDecorator('title', {
  22. rules: [{ required: true, message: 'Please input the title of collection!' }],
  23. })(<Input />)}
  24. </FormItem>
  25. <FormItem label="Description">
  26. {getFieldDecorator('description')(<Input type="textarea" />)}
  27. </FormItem>

动态增减表单项

动态增加、减少表单项。

Form表单 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Input, Icon, Button } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. let uuid = 0;
  6. class DynamicFieldSet extends React.Component {
  7. remove = k => {
  8. const { form } = this.props;
  9. // can use data-binding to get
  10. const keys = form.getFieldValue('keys');
  11. // We need at least one passenger
  12. if (keys.length === 1) {
  13. return;
  14. }
  15. // can use data-binding to set
  16. form.setFieldsValue({
  17. keys: keys.filter(key => key !== k),
  18. });
  19. };
  20. add = () => {
  21. const { form } = this.props;
  22. // can use data-binding to get
  23. const keys = form.getFieldValue('keys');
  24. const nextKeys = keys.concat(uuid);
  25. uuid++;
  26. // can use data-binding to set
  27. // important! notify form to detect changes
  28. form.setFieldsValue({
  29. keys: nextKeys,

时间类控件

Form表单 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, DatePicker, TimePicker, Button } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. const MonthPicker = DatePicker.MonthPicker;
  6. const RangePicker = DatePicker.RangePicker;
  7. class TimeRelatedForm extends React.Component {
  8. handleSubmit = e => {
  9. e.preventDefault();
  10. this.props.form.validateFields((err, fieldsValue) => {
  11. if (err) {
  12. return;
  13. }
  14. // Should format date value before submit.
  15. const rangeValue = fieldsValue['range-picker'];
  16. const rangeTimeValue = fieldsValue['range-time-picker'];
  17. const values = {
  18. ...fieldsValue,
  19. 'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
  20. 'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
  21. 'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
  22. 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
  23. 'range-time-picker': [
  24. rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
  25. rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
  26. ],
  27. 'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
  28. };
  29. console.log('Received values of form: ', values);
  30. });
  31. };
  32. render() {
  33. const { getFieldDecorator } = this.props.form;
  34. const formItemLayout = {
  35. labelCol: {
  36. xs: { span: 24 },
  37. sm: { span: 8 },
  38. },
  39. wrapperCol: {
  40. xs: { span: 24 },
  41. sm: { span: 16 },
  42. },
  43. };
  44. const config = {

自定义表单控件

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

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

Form表单 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Input, Select, Button } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. const Option = Select.Option;
  6. class PriceInput extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. const value = this.props.value || {};
  10. this.state = {
  11. number: value.number || 0,
  12. currency: value.currency || 'rmb',
  13. };
  14. }
  15. componentWillReceiveProps(nextProps) {
  16. // Should be a controlled component.
  17. if ('value' in nextProps) {
  18. const value = nextProps.value;
  19. this.setState(value);
  20. }
  21. }
  22. handleNumberChange = e => {
  23. const number = parseInt(e.target.value || 0, 10);
  24. if (isNaN(number)) {
  25. return;

表单数据存储于上层组件

通过使用 onFieldsChangemapPropsToFields,可以把表单的数据存储到上层组件或者 Reduxdva 中,更多可参考 rc-form 示例

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

Form表单 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Input } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. const CustomizedForm = Form.create({
  6. onFieldsChange(props, changedFields) {
  7. props.onChange(changedFields);
  8. },
  9. mapPropsToFields(props) {
  10. return {
  11. username: Form.createFormField({
  12. ...props.username,
  13. value: props.username.value,
  14. }),
  15. };
  16. },
  17. onValuesChange(_, values) {
  18. console.log(values);
  19. },
  20. })(props => {
  21. const { getFieldDecorator } = props.form;
  22. return (
  23. <Form layout="inline">
  24. <FormItem label="Username">
  25. {getFieldDecorator('username', {
  26. rules: [{ required: true, message: 'Username is required!' }],
  27. })(<Input />)}
  28. </FormItem>
  29. </Form>
  30. );
  31. });
  32. class Demo extends React.Component {
  33. state = {
  34. fields: {

自行处理表单数据

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

Form表单 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, InputNumber } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. function validatePrimeNumber(number) {
  6. if (number === 11) {
  7. return {
  8. validateStatus: 'success',
  9. errorMsg: null,
  10. };
  11. }
  12. return {
  13. validateStatus: 'error',
  14. errorMsg: 'The prime between 8 and 12 is 11!',
  15. };
  16. }
  17. class RawForm extends React.Component {
  18. state = {
  19. number: {
  20. value: 11,
  21. },
  22. };
  23. handleNumberChange = value => {
  24. this.setState({
  25. number: {
  26. ...validatePrimeNumber(value),
  27. value,

自定义校验

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

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

Form表单 - 图11

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. Form,
  5. Input,
  6. DatePicker,
  7. Col,
  8. TimePicker,
  9. Select,
  10. Cascader,
  11. InputNumber,
  12. } from 'choerodon-ui';
  13. const FormItem = Form.Item;
  14. const Option = Select.Option;
  15. const formItemLayout = {
  16. labelCol: {
  17. xs: { span: 24 },
  18. sm: { span: 5 },
  19. },
  20. wrapperCol: {
  21. xs: { span: 24 },
  22. sm: { span: 12 },
  23. },
  24. };
  25. ReactDOM.render(
  26. <Form>
  27. <FormItem
  28. {...formItemLayout}
  29. label="Fail"
  30. validateStatus="error"
  31. help="Should be combination of numbers & alphabets"
  32. >
  33. <Input placeholder="unavailable choice" id="error" />
  34. </FormItem>
  35. <FormItem {...formItemLayout} label="Warning" validateStatus="warning">
  36. <Input placeholder="Warning" id="warning" />
  37. </FormItem>
  38. <FormItem
  39. {...formItemLayout}
  40. label="Validating"
  41. hasFeedback
  42. validateStatus="validating"
  43. help="The information is being validated..."
  44. >
  45. <Input placeholder="I'm the content is being validated" id="validating" />
  46. </FormItem>
  47. <FormItem {...formItemLayout} label="Success" hasFeedback validateStatus="success">
  48. <Input placeholder="I'm the content" id="success" />
  49. </FormItem>
  50. <FormItem {...formItemLayout} label="Warning" hasFeedback validateStatus="warning">
  51. <Input placeholder="Warning" id="warning" />
  52. </FormItem>
  53. <FormItem
  54. {...formItemLayout}
  55. label="Fail"
  56. hasFeedback
  57. validateStatus="error"

表单联动

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

Form表单 - 图12

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Select, Input, Button } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. const Option = Select.Option;
  6. class App extends React.Component {
  7. handleSubmit = e => {
  8. e.preventDefault();
  9. this.props.form.validateFields((err, values) => {
  10. if (!err) {
  11. console.log('Received values of form: ', values);
  12. }
  13. });
  14. };
  15. handleSelectChange = value => {
  16. console.log(value);
  17. this.props.form.setFieldsValue({
  18. note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
  19. });
  20. };
  21. render() {
  22. const { getFieldDecorator } = this.props.form;
  23. return (
  24. <Form onSubmit={this.handleSubmit}>
  25. <FormItem label="Note" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
  26. {getFieldDecorator('note', {
  27. rules: [{ required: true, message: 'Please input your note!' }],
  28. })(<Input />)}
  29. </FormItem>
  30. <FormItem label="Gender" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
  31. {getFieldDecorator('gender', {
  32. rules: [{ required: true, message: 'Please select your gender!' }],
  33. })(

表单布局

表单有三种布局。

Form表单 - 图13

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Input, Button, Radio } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. class FormLayoutDemo extends React.Component {
  6. constructor() {
  7. super();
  8. this.state = {
  9. formLayout: 'horizontal',
  10. };
  11. }
  12. handleFormLayoutChange = e => {
  13. this.setState({ formLayout: e.target.value });
  14. };
  15. render() {
  16. const { formLayout } = this.state;
  17. const formItemLayout =
  18. formLayout === 'horizontal'
  19. ? {
  20. labelCol: { span: 4 },
  21. wrapperCol: { span: 14 },
  22. }
  23. : null;
  24. const buttonItemLayout =
  25. formLayout === 'horizontal'
  26. ? {
  27. wrapperCol: { span: 14, offset: 4 },
  28. }
  29. : null;
  30. return (
  31. <div>
  32. <Form layout={formLayout}>
  33. <FormItem label="Form Layout" {...formItemLayout}>
  34. <Radio.Group defaultValue="horizontal" onChange={this.handleFormLayoutChange}>
  35. <Radio.Button value="horizontal">Horizontal</Radio.Button>

动态校验规则

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

Form表单 - 图14

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Input, Button, Checkbox } from 'choerodon-ui';
  4. const FormItem = Form.Item;
  5. const formItemLayout = {
  6. labelCol: { span: 4 },
  7. wrapperCol: { span: 8 },
  8. };
  9. const formTailLayout = {
  10. labelCol: { span: 4 },
  11. wrapperCol: { span: 8, offset: 4 },
  12. };
  13. class DynamicRule extends React.Component {
  14. state = {
  15. checkNick: false,
  16. };
  17. check = () => {
  18. this.props.form.validateFields(err => {
  19. if (!err) {
  20. console.info('success');
  21. }
  22. });
  23. };
  24. handleChange = e => {
  25. this.setState(
  26. {
  27. checkNick: e.target.checked,
  28. },
  29. () => {
  30. this.props.form.validateFields(['nickname'], { force: true });
  31. },
  32. );
  33. };
  34. render() {

校验其他组件

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

Form表单 - 图15

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. Form,
  5. Select,
  6. InputNumber,
  7. Switch,
  8. Radio,
  9. Slider,
  10. Button,
  11. Upload,
  12. Icon,
  13. Rate,
  14. } from 'choerodon-ui';
  15. const FormItem = Form.Item;
  16. const Option = Select.Option;
  17. const RadioButton = Radio.Button;
  18. const RadioGroup = Radio.Group;
  19. class Demo extends React.Component {
  20. handleSubmit = e => {
  21. e.preventDefault();
  22. this.props.form.validateFields((err, values) => {
  23. if (!err) {
  24. console.log('Received values of form: ', values);
  25. }
  26. });
  27. };
  28. normFile = e => {
  29. console.log('Upload event:', e);
  30. if (Array.isArray(e)) {
  31. return e;
  32. }
  33. return e && e.fileList;
  34. };
  35. render() {
  36. const { getFieldDecorator } = this.props.form;
  37. const formItemLayout = {
  38. labelCol: { span: 6 },
  39. wrapperCol: { span: 14 },
  40. };
  41. return (
  42. <Form onSubmit={this.handleSubmit}>
  43. <FormItem {...formItemLayout} label="Plain Text">
  44. <span className="c7n-form-text">China</span>
  45. </FormItem>
  46. <FormItem {...formItemLayout} label="Select" hasFeedback>
  47. {getFieldDecorator('select', {
  48. rules: [{ required: true, message: 'Please select your country!' }],
  49. })(
  50. <Select placeholder="Please select a country">
  51. <Option value="china">China</Option>
  52. <Option value="use">U.S.A</Option>
  53. </Select>,
  54. )}
  55. </FormItem>
  56. <FormItem {...formItemLayout} label="Select[multiple]">
  57. {getFieldDecorator('select-multiple', {
  58. rules: [
  59. { required: true, message: 'Please select your favourite colors!', type: 'array' },
  60. ],
  61. })(
  62. <Select mode="multiple" placeholder="Please select favourite colors">
  63. <Option value="red">Red</Option>
  64. <Option value="green">Green</Option>
  65. <Option value="blue">Blue</Option>
  66. </Select>,

API

Form

更多示例参考 rc-form

参数说明类型默认值
formForm.create() 包装过的组件会自带 this.props.form 属性,直接传给 Form 即可。1.7.0 之后无需设置object
hideRequiredMark隐藏所有表单项的必选标记Booleanfalse
layout表单布局(2.8 之后支持)‘horizontal’|’vertical’|’inline’‘horizontal’
onSubmit数据验证成功后回调事件Function(e:Event)

Form.create(options)

使用方式如下:

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

options 的配置项如下。

参数说明类型
mapPropsToFields把父组件的属性映射到表单项上(如:把 Redux store 中的值读出),需要对返回值中的表单域数据用 Form.createFormField 标记(props) => Object{ fieldName: FormField { value } }
validateMessages默认校验信息,可用于把默认错误信息改为中文等,格式与 newMessages 返回值一致Object { [nested.path]: String }
onFieldsChangeForm.Item 子节点的值发生改变时触发,可以把对应的值转存到 Redux storeFunction(props, fields)
onValuesChange任一表单域的值发生改变时的回调(props, values) => void

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

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

方法     说明                                    类型      
getFieldDecorator用于和表单进行双向绑定,详见下方描述
getFieldError获取某个输入控件的 ErrorFunction(name)
getFieldsError获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 ErrorFunction([names: string[]])
getFieldsValue获取一组输入控件的值,如不传入参数,则获取全部组件的值Function([fieldNames: string[]])
getFieldValue获取一个输入控件的值Function(fieldName: string)
isFieldsTouched判断是否任一输入控件经历过 getFieldDecorator 的值收集时机 options.trigger(names?: string[]) => boolean
isFieldTouched判断一个输入控件是否经历过 getFieldDecorator 的值收集时机 options.trigger(name: string) => boolean
isFieldValidating判断一个输入控件是否在校验状态Function(name)
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, modify))
validateFieldsAndScrollvalidateFields 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围参考 validateFields
isModifiedFields判断一组输入控件的值是否有修改(names?: string[]) => boolean
isModifiedField判断一个输入控件的值是否有修改(name: string) => boolean

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

参数说明类型默认值
options.first若为 true,则每一表单域的都会在碰到第一个失败了的校验规则后停止校验booleanfalse
options.firstFields指定表单域会在碰到第一个失败了的校验规则后停止校验String[][]
options.force对已经校验过的表单域,在 validateTrigger 再次被触发时是否再次校验booleanfalse
options.scroll定义 validateFieldsAndScroll 的滚动行为,详细配置见 dom-scroll-into-view configObject{}

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) 参数

参数说明类型默认值
id必填输入控件唯一标志。支持嵌套式的写法string
options.getValueFromEvent可以把 onChange 的参数(如 event)转化为控件的值function(..args)reference
options.initialValue子节点的初始值,类型、可选值均由子节点决定(注意:由于内部校验时使用 === 判断是否变化,建议使用变量缓存所需设置的值而非直接使用字面量))
options.normalize转换默认的 value 给控件,一个选择全部的例子function(value, prevValue, allValues): any-
options.rules校验规则,参考下方文档object[]
options.trigger收集子节点的值的时机string‘onChange’
options.validateFirst当某一规则校验不通过时,是否停止剩下的规则的校验booleanfalse
options.validateTrigger校验子节点值的时机string|string[]‘onChange’
options.valuePropName子节点的值的属性,如 Switch 的是 ‘checked’string‘value’

更多参数请查看 rc-form option

Form.Item

注意:

  • 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,help required validateStatus 无法自动生成。
  • 2.2.0 之前,只有当表单域为 Form.Item 的子元素时,才会自动生成 help required validateStatus,嵌套情况需要自行设置。
参数说明类型默认值
colon配合 label 属性使用,表示是否显示 label 后面的冒号booleantrue
extra额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。string|ReactNode
hasFeedback配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用booleanfalse
help提示信息,如不设置,则会根据校验规则自动生成string|ReactNode
labellabel 标签的文本string|ReactNode
labelCollabel 标签布局,同 <Col> 组件,设置 span offset 值,如 {span: 3, offset: 12}sm: {span: 3, offset: 12}object
required是否必填,如不设置,则会根据校验规则自动生成booleanfalse
validateStatus校验状态,如不设置,则会根据校验规则自动生成,可选:’success’ ‘warning’ ‘error’ ‘validating’string
wrapperCol需要为输入控件设置布局样式时,使用该属性,用法同 labelColobject

校验规则

参数说明类型默认值
enum枚举类型string-
len字段长度number-
max最大长度number-
message校验文案string-
min最小长度number-
pattern正则表达式校验RegExp-
required是否必选booleanfalse
transform校验前转换字段值function(value) => transformedValue:any-
type内建校验类型,可选项string‘string’
validator自定义校验(注意,callback 必须被调用)function(rule, value, callback)-
whitespace必选时,空格是否会被视为错误booleanfalse

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

在 TypeScript 中使用

  1. import { Form } from 'choerodon-ui';
  2. import { FormComponentProps } from 'choerodon-ui/lib/form';
  3. interface UserFormProps extends FormComponentProps {
  4. age: number;
  5. name: string;
  6. }
  7. class UserForm extends React.Component<UserFormProps, any> {
  8. }