Form 表单

Form 表单

表单。

何时使用

代码演示

基本使用

表单。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  TextField,
  Password,
  NumberField,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  Button,
  Menu,
  Dropdown,
  Icon,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
function validationRenderer(error, props) {
  if (error.ruleName === 'valueMissing' && props.name === 'password') {
    return <span style={{ color: 'blue' }}>{error.validationMessage}(自定义)</span>;
  }
}
const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.io/">
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.com.cn/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://github.com/choerodon/choerodon-ui">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);
const dropdown = (
  <Dropdown overlay={menu}>

设置冒号模式


import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  TextField,
  Password,
  NumberField,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  Button,
  Menu,
  Dropdown,
  Icon,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
function validationRenderer(error, props) {
  if (error.ruleName === 'valueMissing' && props.name === 'password') {
    return <span style={{ color: 'blue' }}>{error.validationMessage}(自定义)</span>;
  }
}
const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.io/">
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.com.cn/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://github.com/choerodon/choerodon-ui">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);
const dropdown = (
  <Dropdown overlay={menu}>

数据源

表单绑定数据源。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Form,
  TextField,
  NumberField,
  Password,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  Switch,
  Lov,
  Button,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, record) {
  if (value !== record.get('password')) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
const defaultValidationMessages = {
  valueMissing: '请输入{label}。（自定义）',
};
class App extends React.Component {
  ds = new DataSet({
    fields: [
      {
        name: 'phone',
        type: 'string',
        label: '手机号',
        labelWidth: 150,
        required: true,
        pattern: '^1[3-9]\\d{9}$',
      },
      {
        name: 'password',
        type: 'string',
        label: '密码',
        required: true,
        defaultValidationMessages,
      },
      {
        name: 'confirmPassword',
        type: 'string',
        label: '确认密码',
        required: true,
        validator: passwordValidator,
      },
      {
        name: 'age',
        type: 'number',

数据源记录

表单绑定数据源某条记录。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Form, TextField, NumberField, Password, EmailField, UrlField, DatePicker, Select, SelectBox, Lov, Button } from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, record) {
  if (value !== record.get('password')) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'phone', type: 'string', label: '手机号', required: true },
      { name: 'password', type: 'string', label: '密码', required: true },
      { name: 'confirmPassword', type: 'string', label: '确认密码', required: true, validator: passwordValidator },
      { name: 'age', type: 'number', label: '年龄', required: true, help: '我们需要确定你的年龄' },
      { name: 'sex', type: 'string', label: '性别', required: true },
      { name: 'language', type: 'string', label: '语言', required: true, help: '超过两行的帮助信息超过两行的帮助信息超过两行的帮助信息' },
      { name: 'email', type: 'email', label: '邮箱', required: true },
      { name: 'homepage', type: 'url', label: '个人主页', required: true },
      { name: 'birth', type: 'date', label: '生日', required: true },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
    ],
  });
  render() {
    return (
      <Form record={this.ds.current} style={{ width: '4rem' }}>
        <TextField pattern="1[3-9]\d{9}" name="phone" />
        <Password name="password" />
        <Password name="confirmPassword" />
        <NumberField name="age" min={18} step={1} addonAfter="周岁" showHelp="tooltip" />
        <SelectBox name="sex">
          <Option value="M">男</Option>
          <Option value="F">女</Option>
        </SelectBox>
        <Select name="language">
          <Option value="zh-cn">简体中文</Option>
          <Option value="en-us">英语(美国)</Option>
          <Option value="ja-jp">日本語</Option>
        </Select>
        <EmailField name="email" />
        <UrlField name="homepage" />
        <DatePicker name="birth" />
        <Lov name="code" />
        <div>
          <Button type="submit">注册</Button>
          <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
        </div>
      </Form>
    );
  }

布局

布局。

import React from 'react';
import ReactDOM from 'react-dom';
import { Form, TextField, Password, NumberField, EmailField, UrlField, DatePicker, Select, SelectBox, TextArea, Button } from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
ReactDOM.render(
  <Form labelWidth={[60, 70, 50]} columns={3}>
    <TextField colSpan={3} label="手机号" pattern="1[3-9]\d{9}" name="phone" required />
    <Password label="密码" name="password" required />
    <NumberField rowSpan={2} label="年龄" name="age" min={18} step={1} required addonAfter="周岁" />
    <Password label="确认密码" name="confirmPassword" required validator={passwordValidator} />
    <SelectBox colSpan={2} label="性别" name="sex" required>
      <Option value="M">男</Option>
      <Option value="F">女</Option>
    </SelectBox>
    <Select label="语言" name="language" required>
      <Option value="zh-cn">简体中文</Option>
      <Option value="en-us">英语(美国)</Option>
      <Option value="ja-jp">日本語</Option>
    </Select>
    <EmailField label="邮箱" name="email" />
    <TextArea rowSpan={2} colSpan={2} label="简介" name="description" required style={{ height: 80 }} help="请输入100~300个字符请输入100~300个字符请输入100~300个字符" />
    <UrlField label={<span>个人主页</span>} name="homepage" required help="请输入你的个人主页，如Github Pages个人博客" showHelp="tooltip" />
    <DatePicker label="生日" name="birth" required />
    <div newLine colSpan={3}>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
    </div>
  </Form>,
  document.getElementById('container')
);

垂直布局

垂直布局。

import React from 'react';
import ReactDOM from 'react-dom';
import { Form, TextField, Password, NumberField, EmailField, UrlField, DatePicker, Select, SelectBox, CodeArea, Button } from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
ReactDOM.render(
  <Form labelLayout="vertical" columns={3}>
    <TextField colSpan={3} label="手机号" pattern="1[3-9]\d{9}" name="phone" required />
    <Password label="密码" name="password" required />
    <Password label="确认密码" name="confirmPassword" required validator={passwordValidator} help="请输入与左侧相同的密码" />
    <NumberField rowSpan={2} label="年龄" name="age" min={18} step={1} required />
    <SelectBox label="性别" name="sex" required>
      <Option value="M">男</Option>
      <Option value="F">女</Option>
    </SelectBox>
    <Select label="语言" name="language" required>
      <Option value="zh-cn">简体中文</Option>
      <Option value="en-us">英语(美国)</Option>
      <Option value="ja-jp">日本語</Option>
    </Select>
    <EmailField label="邮箱" name="email" />
    <CodeArea rowSpan={2} colSpan={2} rows={4} label="简介" name="description" required />
    <UrlField label="个人主页" name="homepage" required />
    <DatePicker label="生日" name="birth" required />
    <div newLine colSpan={3}>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
    </div>
  </Form>,
  document.getElementById('container')
);

占位符显示标签

占位符显示标签。

import React from 'react';
import ReactDOM from 'react-dom';
import { Form, TextField, Password, NumberField, EmailField, UrlField, DatePicker, Select, SelectBox, TextArea, Button } from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
ReactDOM.render(
  <Form labelLayout="placeholder" columns={3}>
    <TextField colSpan={3} label="手机号" pattern="1[3-9]\d{9}" name="phone" required />
    <Password label="密码" name="password" required />
    <Password label="确认密码" name="confirmPassword" required validator={passwordValidator} help="请输入与左侧相同的密码" />
    <NumberField rowSpan={2} label="年龄" name="age" min={18} step={1} required />
    <SelectBox label="性别" name="sex" required>
      <Option value="M">男</Option>
      <Option value="F">女</Option>
    </SelectBox>
    <Select label="语言" name="language" required>
      <Option value="zh-cn">简体中文</Option>
      <Option value="en-us">英语(美国)</Option>
      <Option value="ja-jp">日本語</Option>
    </Select>
    <EmailField label="邮箱" name="email" />
    <TextArea rowSpan={2} colSpan={2} label="简介" name="description" required style={{ height: 80 }} />
    <UrlField label="个人主页" name="homepage" required />
    <DatePicker label="生日" name="birth" required />
    <div newLine colSpan={3}>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
    </div>
  </Form>,
  document.getElementById('container')
);

浮动标签

浮动标签。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  CheckBox,
  TextField,
  Password,
  NumberField,
  EmailField,
  UrlField,
  DatePicker,
  Range,
  Select,
  SelectBox,
  Switch,
  TextArea,
  Button,
  Icon,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
ReactDOM.render(
  <Form labelLayout="float" columns={3} header="Float Label">
    <TextField
      colSpan={3}
      label="手机号"
      pattern="1[3-9]\d{9}"
      name="phone"
      required
      placeholder="请输入手机号"
      addonBefore="+86"
      addonAfter="中国大陆"
    />
    <Password label="密码" name="password" required />
    <Password
      label="确认密码"
      name="confirmPassword"
      required
      validator={passwordValidator}
      help="请输入与左侧相同的密码"
      disabled
    />
    <NumberField rowSpan={2} label="年龄" name="age" min={18} step={1} required />
    <SelectBox label="性别" name="sex" required>
      <Option value="M">男</Option>
      <Option value="F">女</Option>
    </SelectBox>

表单头

表单头。

import React from 'react';
import ReactDOM from 'react-dom';
import { Form, TextField, Password, NumberField, EmailField, UrlField, DatePicker, Select, SelectBox, Button } from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
ReactDOM.render(
  <Form header="Custom Header">
    <TextField label="手机号" pattern="1[3-9]\d{9}" name="phone" required clearButton />
    <Password label="密码" name="password" required />
    <Password label="确认密码" name="confirmPassword" required validator={passwordValidator} />
    <NumberField label="年龄" name="age" min={18} step={1} required />
    <SelectBox label="性别" name="sex" required>
      <Option value="M">男</Option>
      <Option value="F">女</Option>
    </SelectBox>
    <Select label="语言" name="language" required>
      <Option value="zh-cn">简体中文</Option>
      <Option value="en-us">英语(美国)</Option>
      <Option value="ja-jp">日本語</Option>
    </Select>
    <EmailField label="邮箱" name="email" required />
    <UrlField label="个人主页" name="homepage" required />
    <DatePicker label="生日" name="birth" required />
    <div>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
    </div>
  </Form>,
  document.getElementById('container')
);

响应式

响应式。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  TextField,
  Password,
  NumberField,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  Button,
} from 'choerodon-ui/pro';
const { Option } = Select;
ReactDOM.render(
  <Form
    columns={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4 }}
    labelLayout={{ xs: 'vertical' }}
  >
    <TextField
      label="手机号"
      pattern="1[3-9]\d{9}"
      name="phone"
      required
      clearButton
      addonBefore="+86"
      addonAfter="中国大陆"
    />
    <Password label="密码" name="password" required />
    <Password
      label="确认密码"
      name="confirmPassword"
      required

禁用

表单。


import React from 'react';
import ReactDOM from 'react-dom';
import { Form, TextField, Password, NumberField, EmailField, UrlField, DatePicker, Select, SelectBox, Button, Menu, Dropdown, Icon } from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.io/">1st menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://choerodon.com.cn/">2nd menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="https://github.com/choerodon/choerodon-ui">3rd menu item</a>
    </Menu.Item>
  </Menu>
);
const dropdown = (
  <Dropdown overlay={menu}>
    <Button funcType="flat" size="small">
      Click me <Icon type="arrow_drop_down" />
    </Button>
  </Dropdown>
);
ReactDOM.render(
  <Form disabled style={{ width: '4rem' }}>
    <TextField label="手机号" pattern="1[3-9]\d{9}" name="phone" required clearButton addonBefore="+86" addonAfter="中国大陆" />
    <Password label="密码" name="password" required />
    <Password label="确认密码" name="confirmPassword" required validator={passwordValidator} help="请输入与上方相同的密码" showHelp="tooltip" />
    <NumberField label="年龄" name="age" min={18} step={1} required help="我们需要确定你的年龄" addonAfter="周岁" />
    <SelectBox label="性别" name="sex" required>
      <Option value="M">男</Option>
      <Option value="F">女</Option>
    </SelectBox>
    <Select label="语言" name="language" required help="超过两行的帮助信息超过两行的帮助信息超过两行的帮助信息">
      <Option value="zh-cn">简体中文</Option>
      <Option value="en-us">英语(美国)</Option>
      <Option value="ja-jp">日本語</Option>
    </Select>
    <EmailField label="邮箱" name="email" required addonAfter={dropdown} />
    <UrlField label="个人主页" name="homepage" required addonBefore="Http://" />
    <DatePicker label="生日" name="birth" required />
    <Form>
      <div>
        <Button type="submit">注册</Button>

显示原始值

显示原始值。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Form,
  TextField,
  NumberField,
  Password,
  EmailField,
  UrlField,
  DatePicker,
  Select,
  SelectBox,
  Switch,
  Lov,
  Button,
  Row,
  Col,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, record) {
  if (value !== record.get('password')) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}
class App extends React.Component {
  ds = new DataSet({
    data: [
      {
        phone: 1800000000,
        age: 18,
        sex: 'F',
        language: 'zh-cn',
        email: 'xxx@choerodon.io',
        homepage: 'https://choerodon.io',
        birth: '1984-11-22',
        code: 'HR.EMPLOYEE_GENDER',
        frozen: 'true',
      },
    ],
    fields: [
      {
        name: 'phone',
        type: 'string',
        label: '手机号',
        required: true,
        pattern: '^1[3-9]\\d{9}$',
      }, // /^1[3-9]\d{9}$/
      { name: 'password', type: 'string', label: '密码', required: true },
      {
        name: 'confirmPassword',
        type: 'string',
        label: '确认密码',
        required: true,
        validator: passwordValidator,

Modal中使用浮动标签

Modal中使用浮动标签Form。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  CheckBox,
  TextField,
  Password,
  NumberField,
  EmailField,
  UrlField,
  DatePicker,
  Range,
  Select,
  SelectBox,
  Switch,
  TextArea,
  Button,
  Modal,
} from 'choerodon-ui/pro';
const { Option } = Select;
function passwordValidator(value, name, form) {
  if (value !== form.getField('password').getValue()) {
    return '您两次输入的密码不一致，请重新输入';
  }
  return true;
}

虚拟分组


import React from 'react';
import ReactDOM from 'react-dom';
import { Form, TextField, Button } from 'choerodon-ui/pro';
const { FormVirtualGroup } = Form;
class App extends React.Component {
  state = {
    showGroup: true,
    showGroup2: true,
  };
  toggleShow = () => {
    this.setState((prevState) => ({
      showGroup: !prevState.showGroup,
    }));
  };
  toggleShow2 = () => {
    this.setState((prevState) => ({
      showGroup2: !prevState.showGroup2,
    }));
  };
  render() {
    const { showGroup, showGroup2 } = this.state;
    return (
      <Form id="basic" style={{ width: '4rem' }}>
        <TextField
          label="手机号"
          labelWidth={150}
          pattern="1[3-9]\d{9}"
          name="phone"
          required
          clearButton
          addonBefore="+86"
          addonAfter="中国大陆"
        />
        {showGroup && (
          <FormVirtualGroup className="virtual-group">
            <TextField label="姓名1" />
            <TextField label="姓名2" />
            {showGroup2 && (
              <FormVirtualGroup className="virtual-group2">
                <TextField label="姓名3" />

API

参数	说明	类型	默认值
action	表单提交请求地址，当设置了 dataSet 时，该属性无作用	string
method	表单提交的 HTTP Method，可选值 GET \| POST	string	POST
target	表单提交的目标，当表单设置了设置 target 且没有 dataSet 时作浏览器默认提交，否则作 Ajax 提交	string
processParams	Ajax 提交时的参数回调	(event) => object
useColon	是否使用冒号，当开启时会在所有的 label 后面加上冒号，并且必填的*号会被移到最前方	boolean	false
excludeUseColonTagList	不使用冒号的标签的列表，当为自定义组件的时候，需要设置 displayName 作为标签名	string[]	[‘div’, ‘button’, ‘Button’]
labelWidth	内部控件的标签宽度。如果为数组则分别对应每列的标签宽度。数组长度不够列数，以默认值补全，响应式参考Responsive	number\| number[] \| object	100
labelAlign	标签文字对齐方式，只在 labelLayout 为 horizontal 时起作用，可选值：left \| center \| right，响应式参考Responsive	string \| object	right
labelLayout	标签位置，可选值 horizontal \| vertical \| placeholder \| float \| none，响应式参考Responsive	string \| object	horizontal
dataIndex	对照 record 在 DataSet 中的 index	number	ds.currentIndex
record	对照 record，优先级高于 dataSet 和 dataIndex	Record
columns	列数，响应式参考Responsive	number \| object	1
pristine	显示原始值	boolean	false
onSubmit	提交回调	Function
onReset	重置回调	Function
onSuccess	提交成功回调	Function
onError	提交失败回调	Function

更多属性请参考 DataSetComponent。

Form.FormVirtualGroup

当需要对 Form 的一些表单控件进行分组控制的时候可以使用，例如统一控制某些表单控件的显隐，此外，使用FormVirtualGroup可以统一对表单控件进行属性注入，例如统一的className等.注意，FormVirtualGroup组件本身不会产生实际的dom结果，其结果与去掉FormVirtualGroup然后将显隐控制等逐一写入表单控件中的写法完全一致，

Form Layout

Form 子元素属性

参数	说明	类型	默认值
rowSpan	表单下控件跨越的行数	number	1
colSpan	表单下控件跨越的列数	number	1
newLine	另起新行	boolean
label	标签	string \| ReactNode
name	字段名。可获取 DataSet 的字段属性，如 label，require 等，一般用于控件外需要嵌套其他元素时使用。	string
labelWidth	标签宽度。同列控件中标签宽度取最大设定值。子元素的 labelWidth 无法响应式。	number

Form Responsive

响应式可设置参数 columns | labelWidth | labelAlign | labelLayout 为一个键值对。

键值可参考 Responsive BreakPoints。

Form表单

Form 表单

何时使用

代码演示

基本使用

设置冒号模式

数据源

数据源记录

布局

垂直布局

占位符显示标签

浮动标签

表单头

响应式

禁用

显示原始值

Modal中使用浮动标签

虚拟分组

API

Form.FormVirtualGroup

Form Layout

Form 子元素属性

Form Responsive