Form表单

Form表单

表单。

何时使用

代码演示

表单。

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}>
    <Button funcType="flat" size="small">
      Click me <Icon type="arrow_drop_down" />
    </Button>
  </Dropdown>
);
ReactDOM.render(
  <Form id="basic" style={{ width: '4rem' }}>
    <TextField
      label="手机号"
      labelWidth={150}
      pattern="1[3-9]\d{9}"
      name="phone"
      required
      clearButton
      addonBefore="+86"
      addonAfter="中国大陆"
    />
    <Password label="密码" name="password" required validationRenderer={validationRenderer} />
    <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 />
    <div>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>
        重置
      </Button>
    </div>
  </Form>,
  mountNode,
);

数据源

表单绑定数据源。

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}$',
      }, // /^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',
        label: '年龄',
        required: true,
        min: 18,
        step: 1,
        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' },
      { name: 'frozon', type: 'boolean', label: '是否冻结' },
    ],
  });
  changeField = () => {
    this.ds.current.getField('code').set('textField', 'description');
  };
  render() {
    return (
      <Form dataSet={this.ds} style={{ width: '4.5rem' }}>
        <TextField name="phone" />
        <Password name="password" />
        <Password name="confirmPassword" />
        <NumberField name="age" 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" />
        <Switch name="frozon" />
        <div>
          <Button type="submit">注册</Button>
          <Button type="reset" style={{ marginLeft: 8 }}>
            重置
          </Button>
          <Button onClick={this.changeField} style={{ marginLeft: 8 }}>
            设置代码描述的textField
          </Button>
        </div>
      </Form>
    );
  }
}
ReactDOM.render(<App />, mountNode);

数据源记录

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

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>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

布局

布局。

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>,
  mountNode
);

垂直布局

垂直布局。

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>,
  mountNode
);

占位符显示标签

占位符显示标签。

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>,
  mountNode
);

浮动标签

浮动标签。

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>
    <Select label="语言" name="language" required>
      <Option value="zh-cn">简体中文</Option>
      <Option value="en-us">英语(美国)</Option>
      <Option value="ja-jp">日本語</Option>
    </Select>
    <EmailField prefix={<Icon type="mail_outline" />} label="邮箱" name="email" multiple />
    <TextArea
      rowSpan={2}
      colSpan={2}
      label="简介"
      name="description"
      required
      style={{ height: 80 }}
      placeholder="请输入简介"
    />
    <UrlField
      label="个人主页"
      name="homepage"
      required
      help="请输入你的个人主页，如Github Pages个人博客"
      showHelp="tooltip"
    />
    <DatePicker label="生日" name="birth" required />
    <Range label="阈值" name="threshold" required />
    <Switch label="是否冻结" name="frozen" required />
    <CheckBox label="是否显示" name="frozen" required />
    <div newLine colSpan={3}>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>
        重置
      </Button>
    </div>
  </Form>,
  mountNode,
);

表单头

表单头。

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>,
  mountNode
);

响应式

响应式。

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: 4, xxl: 5 }}
    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 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 />
    <UrlField label="个人主页" name="homepage" required addonBefore="Http://" />
    <DatePicker label="生日" name="birth" required />
    <div>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
    </div>
  </Form>,
  mountNode
);

禁用

表单。

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>
        <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
      </div>
    </Form>
  </Form>,
  mountNode
);

显示原始值

显示原始值。

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',
      frozon: '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 },
      { name: 'age', type: 'number', label: '年龄', required: true, min: 18, step: 1, 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' },
      { name: 'frozon', type: 'boolean', label: '是否冻结' },
    ],
  });
  render() {
    return (
      <Row>
        <Col span={12}>
          <Form pristine dataSet={this.ds} style={{ width: '4rem' }}>
            <TextField name="phone" />
            <Password name="password" />
            <Password name="confirmPassword" />
            <NumberField name="age" 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" />
            <Switch name="frozon" />
          </Form>
        </Col>
        <Col span={12}>
          <Form dataSet={this.ds} style={{ width: '4rem' }}>
            <TextField name="phone" />
            <Password name="password" />
            <Password name="confirmPassword" />
            <NumberField name="age" 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" />
            <Switch name="frozon" />
            <div>
              <Button type="submit">注册</Button>
              <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
            </div>
          </Form>
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

Modal中使用浮动标签

Modal中使用浮动标签Form。

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;
}
const modalContent = (
  <Form labelLayout="float" columns={3} header="Float Label">
    <TextField colSpan={3} label="手机号" pattern="1[3-9]\d{9}" name="phone" required placeholder="请输入手机号" />
    <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>
    <div style={{ height: 500 }} />
    <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" multiple />
    <TextArea rowSpan={2} colSpan={2} label="简介" name="description" required style={{ height: 80 }} placeholder="请输入简介" />
    <UrlField label="个人主页" name="homepage" required help="请输入你的个人主页，如Github Pages个人博客" showHelp="tooltip" />
    <DatePicker label="生日" name="birth" required />
    <Range label="阈值" name="threshold" required />
    <Switch label="是否冻结" name="frozen" required />
    <CheckBox label="是否显示" name="frozen" required />
    <div newLine colSpan={3}>
      <Button type="submit">注册</Button>
      <Button type="reset" style={{ marginLeft: 8 }}>重置</Button>
    </div>
  </Form>
);
const openModal = () => {
  Modal.open({
    drawer: true,
    children: modalContent,
  });
}
ReactDOM.render(
  <Button onClick={openModal}>Open</Button>,
  mountNode
);

API

Form

参数	说明	类型	默认值
action	表单提交请求地址，当设置了 dataSet 时，该属性无作用	string
method	表单提交的 HTTP Method, 可选值 `GET` `POST`	string	POST
target	表单提交的目标，当表单设置了设置 target 且没有 dataSet 时作浏览器默认提交，否则作 Ajax 提交	string
processParams	Ajax 提交时的参数回调	(event) => object
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 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。