2015-06-15 20:24:01 +08:00
|
|
|
|
# Form
|
|
|
|
|
|
2015-07-29 16:29:18 +08:00
|
|
|
|
- category: Components
|
2015-06-15 20:24:01 +08:00
|
|
|
|
- chinese: 表单
|
2015-08-22 20:16:24 +08:00
|
|
|
|
- type: 表单
|
2015-12-29 23:39:21 +08:00
|
|
|
|
- cols: 1
|
2015-06-15 20:24:01 +08:00
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2015-07-07 11:25:16 +08:00
|
|
|
|
具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
|
|
|
|
|
|
|
|
|
|
|
2015-10-09 15:44:10 +08:00
|
|
|
|
## 表单
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2015-07-07 23:45:46 +08:00
|
|
|
|
我们为 `form` 提供了以下两种排列方式:
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2015-10-09 15:44:10 +08:00
|
|
|
|
- 水平排列:可以实现 `label` 标签和表单控件的水平排列;
|
2015-11-02 16:37:40 +08:00
|
|
|
|
- 行内排列:使其表现为 `inline-block` 级别的控件。
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2015-10-09 15:44:10 +08:00
|
|
|
|
## 表单域
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
|
|
|
|
表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。
|
|
|
|
|
|
2015-11-02 16:37:40 +08:00
|
|
|
|
这里我们分别封装了表单域 `<Form.Item />` 和输入控件 `<Input />`。
|
2015-10-25 11:35:29 +08:00
|
|
|
|
|
|
|
|
|
```html
|
2015-11-02 16:37:40 +08:00
|
|
|
|
<Form.Item {...props}>
|
|
|
|
|
{children}
|
2015-11-25 10:46:38 +08:00
|
|
|
|
</Form.Item>
|
2015-10-25 11:35:29 +08:00
|
|
|
|
```
|
|
|
|
|
|
2015-10-29 08:42:34 +08:00
|
|
|
|
## Input 输入框
|
|
|
|
|
|
|
|
|
|
```html
|
2015-11-02 16:37:40 +08:00
|
|
|
|
<Input {...props} />
|
2015-10-29 08:42:34 +08:00
|
|
|
|
```
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2016-01-21 22:45:21 +08:00
|
|
|
|
> 注:标准表单中一律使用大号控件。
|
|
|
|
|
|
2015-11-02 16:37:40 +08:00
|
|
|
|
## API
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
|
|
|
|
### Form
|
2015-10-29 08:42:34 +08:00
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
|
|
|
|
|-----------|------------------------------------------|------------|-------|--------|
|
2016-01-22 16:15:03 +08:00
|
|
|
|
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可 | object | | 无 |
|
2015-10-29 08:42:34 +08:00
|
|
|
|
| horizontal | 水平排列布局 | boolean | | false |
|
|
|
|
|
| inline | 行内排列布局 | boolean | | false |
|
|
|
|
|
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | | |
|
|
|
|
|
| prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | | 'ant-form' |
|
|
|
|
|
|
2016-01-22 16:15:03 +08:00
|
|
|
|
### Form.create(options)
|
|
|
|
|
|
|
|
|
|
使用方式如下:
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
class CustomizedForm extends React.Component {}
|
|
|
|
|
|
|
|
|
|
CustomizedForm = Form.create({})(CustomizedForm);
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
`options` 的配置项如下。
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
|
|
|
|
|-----------|------------------------------------------|------------|-------|--------|
|
2016-01-26 17:03:44 +08:00
|
|
|
|
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发,可以把对应的值转存到 Redux store | Function(props, fields) | | |
|
2016-01-22 16:15:03 +08:00
|
|
|
|
| mapPropsToFields | 把 props 转为对应的值,可用于把 Redux store 中的值读出 | Function(props) | | | |
|
|
|
|
|
|
|
|
|
|
经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性,`this.props.form` 提供的 API 如下:
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
|
|
|
|
|-----------|------------------------------------------|------------|-------|--------|
|
2016-01-26 17:03:44 +08:00
|
|
|
|
| getFieldsValue | 获取一组输入控件的值,如不传入参数,则获取全部组件的值 | Function([fieldNames: string[]]) | | |
|
|
|
|
|
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) | | |
|
|
|
|
|
| setFieldsValue | 设置一组输入控件的值 | Function(obj: object) | | |
|
|
|
|
|
| setFields | 设置一组输入控件的值与 Error | Function(obj: object) | | |
|
|
|
|
|
| validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) | | |
|
2016-02-16 10:13:40 +08:00
|
|
|
|
| validateFieldsAndScroll | 与 `validateFields` 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围 | 参考 `validateFields` | | |
|
2016-01-26 17:03:44 +08:00
|
|
|
|
| getFieldError | 获取某个输入控件的 Error | Function(name) | | |
|
|
|
|
|
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | |
|
2016-01-22 16:15:03 +08:00
|
|
|
|
| resetFields | 重置一组输入控件的值与状态,如不传入参数,则重置所有组件 | Function([names: string[]]) | | | |
|
2016-01-30 19:00:56 +08:00
|
|
|
|
| getFieldProps 详见下面描述
|
|
|
|
|
|
|
|
|
|
#### this.props.form.getFieldProps(id, options)
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
|
|
|
|
|-----------|------------------------------------------|------------|-------|--------|
|
|
|
|
|
| options.id | 必填输入控件唯一标志 | string | | |
|
|
|
|
|
| options.valuePropName | 子节点的值的属性,如 Checkbox 的是 'checked' | string | | 'value' |
|
|
|
|
|
| options.initialValue | 子节点的初始值,类型、可选值均由子节点决定 | | | |
|
|
|
|
|
| options.trigger | 收集子节点的值的时机 | string | | 'onChange' |
|
|
|
|
|
| options.validateTrigger | 校验子节点值的时机 | string | | 'onChange' |
|
|
|
|
|
| options.rules | 校验规则,参见 [async-validator](https://github.com/yiminghe/async-validator) | array | | | |
|
|
|
|
|
|
2016-01-22 16:15:03 +08:00
|
|
|
|
|
2015-10-29 08:42:34 +08:00
|
|
|
|
### Form.Item
|
|
|
|
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
|
|
|
|
|-----------|------------------------------------------|------------|-------|--------|
|
|
|
|
|
| label | label 标签的文本 | string | | |
|
|
|
|
|
| labelCol | label 标签布局,通 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` | object | | |
|
2015-11-02 16:37:40 +08:00
|
|
|
|
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | object | | |
|
2016-01-30 19:00:56 +08:00
|
|
|
|
| help | 提示信息,如不设置,则会根据校验规则自动生成 | string | | |
|
|
|
|
|
| required | 是否必填,如不设置,则会根据校验规则自动生成 | bool | | false |
|
|
|
|
|
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
|
2015-10-30 11:36:11 +08:00
|
|
|
|
| hasFeedback | 配合 validateStatus 属性使用,是否展示校验状态图标 | bool | | false |
|
2015-10-29 08:42:34 +08:00
|
|
|
|
| prefixCls | 样式类名,默认为 ant-form,通常您不需要设置 | string | | 'ant-form' |
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:42:34 +08:00
|
|
|
|
### Input
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:42:34 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
|
|
|
|
|-----------|------------------------------------------|------------|-------|--------|
|
|
|
|
|
| type | 【必须】声明 input 类型,同原生 input 标签的 type 属性 | string | | 'text' |
|
|
|
|
|
| id | id | number 或 string | | |
|
2016-01-22 16:15:03 +08:00
|
|
|
|
| value | value 值 | any | | |
|
2015-10-29 18:59:06 +08:00
|
|
|
|
| defaultValue | 设置初始默认值 | any | | |
|
2016-01-22 16:15:03 +08:00
|
|
|
|
| size | 控件大小,默认值为 default 。注:标准表单内的输入框大小限制为 large。 | string | {'large','default','small'} | 'default' |
|
2015-10-29 08:42:34 +08:00
|
|
|
|
| disabled | 是否禁用状态,默认为 false | bool | | false |
|
|
|
|
|
| addonBefore | 带标签的 input,设置前置标签 | node | | |
|
|
|
|
|
| addonAfter | 带标签的 input,设置后置标签 | node | | |
|
|
|
|
|
| prefixCls | 样式类名前缀,默认是 ant,通常您不需要设置 | string | | 'ant' |
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2016-01-22 16:15:03 +08:00
|
|
|
|
> 如果 `Input` 在 `Form.Item` 内,并且 `Form.Item` 设置了 `id` 和 `options` 属性,则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
2016-01-22 11:02:39 +08:00
|
|
|
|
|
2015-10-29 08:42:34 +08:00
|
|
|
|
#### Input.Group
|
2015-07-07 11:25:16 +08:00
|
|
|
|
|
2015-11-02 16:37:40 +08:00
|
|
|
|
```html
|
|
|
|
|
<Input.Group className={string}> // 样式类名前缀,默认是 ant-input-group,通常您不需要设置。
|
2015-10-09 15:44:10 +08:00
|
|
|
|
{children}
|
2015-10-29 08:42:34 +08:00
|
|
|
|
</Input.Group>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
```
|
2015-10-29 08:42:34 +08:00
|
|
|
|
|
2015-12-29 23:39:21 +08:00
|
|
|
|
<style>
|
|
|
|
|
.code-box-demo .ant-form-horizontal {
|
|
|
|
|
max-width: 540px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|