---
name: Form
menu: Components
---

# Form
import { Form, FormRow, Label } from './index';
import Button from '../button/index'
import {Radio, RadioGroup} from '../radio/index';
import Input from '../input/index'
import {CheckGroup} from '../checkbox/index'
import Checkbox from '../checkbox/index'
import Datepicker from '../datepicker/index'
import Validator from '../validator/index'
import Dropdown from '../dropdown/index'
import { Playground, Props } from 'docz'
import './style/index.scss'


## Props & Methods

### Form
<Props of={Form}/>

### FormRow
<Props of={FormRow}/>

### Label
<Props of={Label}/>

## Basic Usage
<Playground>
{() => {
    const options = [{
      label: '班级通收费',
      id: 0
    }, {
      label: '班级1',
      id: 1
    }, {
      label: '班级2',
      id: 2
    }];
    return <Form>
            <FormRow>
              <Label required help="//ke.qq.com">课程名称</Label>
              <Input />
            </FormRow>
            <FormRow>
              <Label required help="//ke.qq.com">是否收费</Label>
              <RadioGroup>
                <Radio value={0}>免费</Radio>
                <Radio value={1}>付费</Radio>
              </RadioGroup>
            </FormRow>
            <FormRow>
              <Label required help="//ke.qq.com">上架IOS</Label>
              <RadioGroup inline={false}>
                <Radio value={0}>是</Radio>
                <Radio value={1}>否</Radio>
              </RadioGroup>
            </FormRow>
            <FormRow>
              <Label required help="//ke.qq.com">收费</Label>
              <CheckGroup options={options} />
            </FormRow>
            <FormRow>
              <Label required help="//ke.qq.com">垂直的收费</Label>
              <CheckGroup options={options} inline={false} />
            </FormRow>
            <FormRow>
              <Label required>报名截止时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
}
}
</Playground>

## Non-horizontal
<Playground>
<Form horizontal={false}>
            <FormRow>
              <Label required>课程名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>
            <FormRow>
              <Label required>老师名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>
            <FormRow>
              <Label required>开始时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
</Playground>

## Inline & Horizontal
<Playground>
    <Form inline>
            <FormRow>
              <Label required>课程名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>
            <FormRow>
              <Label required>老师名称</Label>
              <Input style={{ width: 165 }} />
            </FormRow>
            <FormRow>
              <Label required>开始时间</Label>
              <Datepicker />
            </FormRow>
          </Form>
</Playground>

## Inline & Non-horizontal
<Playground>
    <Form inline horizontal={false}>
        <FormRow>
            <Label required>课程名称</Label>
            <Input style={{ width: 165 }} />
        </FormRow>
        <FormRow>
            <Label required>老师名称</Label>
            <Input style={{ width: 165 }} />
        </FormRow>
        <FormRow>
            <Label required>开始时间</Label>
            <Datepicker />
        </FormRow>
    </Form>
</Playground>

## Work with Validator
<Playground>
{() => {
    class Example extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            disabled: true
            };
            this.onValid = this.onValid.bind(this);
            this.onInValid = this.onInValid.bind(this);
            this.checkers = {
                same: (val, callback) => {
                    const password = this.password.getValue();
                    callback({
                    isValid: password === val,
                    msg: '密码不一致'
                    });
                }
            };
        }
        onValid() {
            this.setState({ disabled: false });
        }
        onInValid() {
            this.setState({ disabled: true });
        }
        render() {
            return (
            <Form>
                <Validator checkers={this.checkers} onValid={this.onValid} onInValid={this.onInValid}>
                <FormRow>
                    <Label required>邮箱</Label>
                    <Input
                    name="email"
                    data-required
                    data-patterns={[{
                        key: 'email',
                        msg: '格式不正确'
                    }]}
                    />
                </FormRow>
                <FormRow>
                    <Label required>密码</Label>
                    <Input
                    name="password"
                    type="password"
                    ref={(instance) => { this.password = instance; }}
                    data-required
                    data-patterns={[{
                        key: 'limit',
                        msg: '密码长度应在6-10位',
                        limit: {
                        min: 6,
                        max: 10
                        }
                    }]}
                    />
                </FormRow>
                <FormRow>
                    <Label required>确认密码</Label>
                    <Input
                    name="c-password"
                    type="password"
                    data-required
                    data-patterns={[{
                        key: 'limit',
                        msg: '密码长度应在6-10位',
                        limit: {
                        min: 6,
                        max: 10
                        }
                    }, {
                        key: 'same'
                    }]}
                    />
                </FormRow>
                <FormRow>
                    <Label>个性签名</Label>
                    <Input
                    name="sign"
                    type="textarea"
                    data-patterns={[{
                        key: 'limit',
                        msg: '100个字以内',
                        min: 1,
                        max: 100
                    }]}
                    />
                </FormRow>
                </Validator>
                <Button
                type="button"
                style={{ marginLeft: 120 }}
                disabled={this.state.disabled}
                >
                注册
                </Button>
            </Form>
            );
        }
    }
    return <Example />
}}
</Playground>

## Form Instances API
```
注意：使用Form API时，表单组件使用Form命名空间下的组件，见下面一个demo
```

| API | 说明 | 类型 |
| :--- | :--- | :--- |
| getValues | 获取此Form下的所有带name的表单组件的值 | Function(): `object {name -> value}` |
| setValues | 设置此Form下的所有带name的表单组件的值 | Function(): `object {name -> value}` |
| getFieldValue(name) | 获取对应表单的值 | Function(name: `string`): `any` |
| setFieldValue(name, value) | 设置对应表单的值 | Function(name: `string`, value: `any`): `bool` |

```
几点说明：
* Form组件主要解决表单布局的问题，如果有什么新的建议或者想法提issue出来哈！
* Form组件为其所有子元素提供了一个context，`this.context.form`就是Form组件实例
* Form布局实现有更改`im-form--{修饰}`类下的表单组件如`im-checkgroup`，`im-radio-group`的样式，如果出现布局问题可以自行更改
```
<Playground>
{() => {
    class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            values: ''
        };
        this.getFormValues = this.getFormValues.bind(this);
        this.setFormValues = this.setFormValues.bind(this);
        this.editingValues = this.editingValues.bind(this);
    }
    getFormValues() {
        const values = this.refs.myForm.getValues();
        this.setState({ values: JSON.stringify(values) });
    }
    setFormValues() {
        const values = JSON.parse(this.state.values);
        this.refs.myForm.setValues(values);
    }
    editingValues(values) {
        this.setState({ values });
    }
    render() {
        const checkOpts = [{
        label: '默认选中且disabled',
        id: 1,
        disabled: true
        }, {
        label: '默认待选中',
        id: 2
        }, {
        label: (<span>默认选中，带有自定义标签/元素的label</span>),
        id: 3
        }];
        return (
        <Form ref="myForm">
            <FormRow>
            <p>Form.Input</p>
            <Input name="input" style={{ width: 165 }} />
            </FormRow>
            <FormRow>
            <p>Form.Datepicker</p>
            <Datepicker name="datepicker" />
            </FormRow>
            <FormRow>
            <p>Form.Dropdown</p>
            <Dropdown
                name="dropdown"
                options={[
                { value: 'A' },
                { value: 'B' },
                { value: 'C' },
                ]}
                style={{ width: '200px' }}
            />
            </FormRow>
            <FormRow>
            <p>Form.Checkbox</p>
            <Checkbox name="checkbox" checked />
            </FormRow>
            <FormRow>
            <p>Form.CheckGroup</p>
            <CheckGroup
                name="checkgroup"
                options={checkOpts}
                value={[1, 3]}
            />
            </FormRow>
            <FormRow>
            <p>Form.RadioGroup</p>
            <RadioGroup name="radiogroup">
                <Radio value={0}>免费</Radio>
                <Radio value={1}>收费</Radio>
            </RadioGroup>
            </FormRow>
            <Button type="button" onClick={this.getFormValues}>getValues</Button>
            <Button type="button" style={{ marginLeft: 40 }} onClick={this.setFormValues}>setValues</Button>
            <Input
            placeholder="按钮点击结果展示"
            value={this.state.values}
            onChange={this.editingValues}
            style={{
                display: 'block',
                marginTop: 20,
                width: 400
            }}
            />
        </Form>
        );
    }
    }
    return <Example />
}
}
</Playground>