Form 表单

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

表单布局、校验、数据提交操作时用到。 组件的设计思想可以看这篇文章 https://zhuanlan.zhihu.com/p/56280821

注意事项

• 组件不要使用关键字 nodeName 作为 name、id

• Form 默认使用 size=medium, 并且会控制 FormItem 内所有组件的size。 如果想修改组件的size <FormItem size="small" >

• 在垂直表单中如果文字（一般 <p> 标签）或者组件向上偏离，可以通过 className="next-form-text-align" 辅助调整

• 必须是被 <FormItem>直接包裹的组件才能展示校验错误提示。如果界面不展示错误信息，请检查是否有多个层级。 比如 <FormItem><div><Input/></div></FormItem> 是无法展示校验信息的。

API

Form

Form.Item

手动传递了 wrapCol labelCol 会使用 Grid 辅助布局; labelAlign='top' 会强制禁用 Grid

Form.Submit

继承 Button API

Form.Reset

继承 Button API

Form.Error

自定义错误展示

关于校验

• 建议一个FormItem放一个组件, 方便错误提示跟随组件展示

• 组件必须是FormItem的第一层子元素

• 详细校验请查看 Field 组件文档的 rules

复杂表单场景

如果您的表单场景非常复杂，比如动态渲染，大量字段，复杂数据结构，复杂联动校验，可以考虑使用 uform，uform已经封装了所有fusion组件，保证您开箱即用

代码示例

基本

拉伸浏览器的时候label宽度不变。

如果组件比较靠上，可以用 className="next-form-text-align" 做调整

查看源码在线预览

import { Form, Input, Checkbox } from '@alifd/next';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        fixedSpan: 10
    },
    wrapperCol: {
        span: 14
    }
};
class Demo extends React.Component {
    handleSubmit = (values) => {
        console.log('Get form value:', values);
    };
    render() {
        return (
            <Form style={{width: '60%'}} {...formItemLayout} >
                <FormItem label="baseUsername:">
                    <p>Fixed Name</p>
                </FormItem>
                <FormItem label="password:">
                    <Input htmlType="password" name="basePass" placeholder="Please Enter Password"/>
                </FormItem>
                <FormItem label="Note:" help="something">
                    <Input.TextArea placeholder="something" name="baseRemark" />
                </FormItem>
                <FormItem label="Agreement:">
                    <Checkbox name="baseAgreement" defaultChecked>Agree</Checkbox>
                </FormItem>
                <FormItem label=" ">
                    <Form.Submit onClick={this.handleSubmit}>Confirm</Form.Submit>
                </FormItem>
            </Form>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

水平

查看源码在线预览

import { Form, Input } from '@alifd/next';
const FormItem = Form.Item;
function handleSubmit(v) {
    console.log(v);
}
ReactDOM.render(<div>
    <Form inline>
        <FormItem label="Username:">
            <FormItem >
                <Input name="first" style={{width: 80}} placeholder="first"/>
            </FormItem>
            <FormItem >
                <Input name="second" style={{width: 80}} placeholder="second"/>
            </FormItem>
        </FormItem>
        <FormItem label="Password:" required hasFeedback={false}>
            <Input htmlType="password" name="inlinePass" placeholder="Please enter your password!"/>
        </FormItem>
        <FormItem label=" ">
            <Form.Submit onClick={handleSubmit}>Submit</Form.Submit>
        </FormItem>
    </Form>
</div>, mountNode);

注册

验证码获取

查看源码在线预览

import { Form, Input } from '@alifd/next';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: { fixedSpan: 3 },
    wrapperCol: { span: 20 }
};
class Demo extends React.Component {
    state = {
        code: '',
        second: 60
    }
    handleSubmit = (values, errors) => {
        if (errors) {
            return;
        }
        console.log('Get form value:', values);
    };
    sendCode = (values, errors) => {
        if (errors) {
            return;
        }
        this.setState({
            code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)
        });
        setInterval(() => {
            this.setState({
                second: --this.state.second
            });
        }, 1000);
    }
    render() {
        const { code } = this.state;
        return (
            <Form style={{ width: 400 }} {...formItemLayout} labelTextAlign="left" size="large" labelAlign="inset" >
                <FormItem label="name" required asterisk={false}>
                    <Input name="username" trim defaultValue="frank" />
                </FormItem>
                <FormItem label="phone" format="tel" required asterisk={false}>
                    <Input name="phone" trim innerAfter={
                        <Form.Submit
                            text
                            type="primary"
                            disabled={!!code}
                            validate={['phone']}
                            onClick={this.sendCode}
                            style={{ marginRight: 10 }}
                        >
                            {code ? `retry after ${this.state.second}s` : 'send code'}
                        </Form.Submit>
                    } />
                </FormItem>
                {
                    this.state.code ? <FormItem label="code" required asterisk={false}>
                        <Input name="code" trim defaultValue={this.state.code} />
                    </FormItem> : null
                }
                <FormItem label=" ">
                    <Form.Submit style={{ width: '100%' }} type="primary" validate onClick={this.handleSubmit}>Submit</Form.Submit>
                </FormItem>
            </Form>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

尺寸

size 会强制设置 FormItem 下的所有组件的size

labelAlign label方位

labelTextAlign 文字左右对齐方式

查看源码在线预览

import { Form, Input, Select } from '@alifd/next';
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
    labelCol: {span: 4},
    wrapperCol: {span: 20}
};
class Demo extends React.Component {
    state = {
        size: 'medium'
    }
    handleChange = (v) => {
        this.setState({
            size: v
        });
    }
    render() {
        return (
            <div>
                <Form {...formItemLayout} size={this.state.size} style={{maxWidth: '500px'}}>
                    <FormItem label="Size:">
                        <Select value={this.state.size} onChange={this.handleChange} style={{width: '100%'}}>
                            <Option value="small">small</Option>
                            <Option value="medium">medium</Option>
                            <Option value="large">large</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="Account:">
                        <Input placeholder="Please enter your user name" id="userName" name="userName"/>
                    </FormItem>
                    <FormItem required label="Password:">
                        <Input htmlType="password" placeholder="Please enter your password" id="password" name="password"/>
                    </FormItem>
                    <FormItem label="Password:" validateState="error">
                        <Input htmlType="password" placeholder="Check your password" id="rePass" name="rePass"/>
                    </FormItem>
                </Form>
                <br/><br/>
                <Form size={this.state.size} inline>
                    <FormItem label="Size:">
                        <Select style={{width: '100%'}} value={this.state.size} onChange={this.handleChange}>
                            <Option value="small">small</Option>
                            <Option value="medium">medium</Option>
                            <Option value="large">large</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="Account:">
                        <Input placeholder="Please enter your user name" id="userName2" name="userName2"/>
                    </FormItem>
                    <FormItem label="Password:">
                        <Input htmlType="password" placeholder="Please enter your password" id="password2" name="password2"/>
                    </FormItem>
                    <FormItem label="Password:" validateState="error">
                        <Input htmlType="password" placeholder="Check your password" id="rePass2" name="rePass2"/>
                    </FormItem>
                </Form>
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

.demo-ctl {
  background-color: #f1f1f1;
  padding: 10.0px;
  color: #0a7ac3;
  border-left: 4.0px solid #0d599a;
}

标签在上

size 会强制设置 FormItem 下的所有组件的size

labelAlign label方位

labelTextAlign 文字左右对齐方式

查看源码在线预览

import { Form, Input, Select } from '@alifd/next';
const FormItem = Form.Item;
const Option = Select.Option;
class Demo extends React.Component {
    render() {
        return (
            <div>
                <Form labelAlign="top" >
                    <FormItem label="Account:">
                        <Input placeholder="Please enter your user name" id="userName" name="userName"/>
                    </FormItem>
                    <FormItem required label="Password:">
                        <Input htmlType="password" placeholder="Please enter your password" id="password" name="password"/>
                    </FormItem>
                    <FormItem label="Password:" validateState="error">
                        <Input htmlType="password" placeholder="Please enter your password" id="rePass" name="rePass"/>
                    </FormItem>
                    <FormItem label="Size:">
                        <Select style={{width: '100%'}} name="size">
                            <Option value="small">small</Option>
                            <Option value="medium">medium</Option>
                            <Option value="large">large</Option>
                        </Select>
                    </FormItem>
                </Form>
                <Form inline labelAlign="top">
                    <FormItem label="Account:">
                        <Input placeholder="Please enter your user name" id="userName2" name="userName2"/>
                    </FormItem>
                    <FormItem label="Password:">
                        <Input htmlType="password" placeholder="Please enter your password" id="password2" name="password2"/>
                    </FormItem>
                    <FormItem label="Password:" validateState="error">
                        <Input htmlType="password" placeholder="Please enter your password" id="rePass2" name="rePass2"/>
                    </FormItem>
                    <FormItem label="Size:">
                        <Select style={{width: '100%'}} name="size2">
                            <Option value="small">small</Option>
                            <Option value="medium">medium</Option>
                            <Option value="large">large</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

.demo-ctl {
  background-color: #f1f1f1;
  padding: 10.0px;
  color: #0a7ac3;
  border-left: 4.0px solid #0d599a;
}

标签内嵌

通过设置labelAlign="inset" (只适用于Input、Select组件，其他组件不适用)

查看源码在线预览

import { Form, Input, Select } from '@alifd/next';
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
    labelCol: {fixedSpan: 4},
    wrapperCol: {span: 20}
};
ReactDOM.render(<div>
    <Form {...formItemLayout} labelAlign="inset" style={{maxWidth: '500px'}}>
        <FormItem label="User Name:">
            <Input placeholder="Please enter your name" id="insetUserName" name="insetUserName"/>
        </FormItem>
        <FormItem label="Password:" validateState="error">
            <Input htmlType="password" placeholder="Please enter your password" id="insetPassword" name="insetPassword"/>
        </FormItem>
        <FormItem label="Size：">
            <Select style={{width: '100%'}}>
                <Option value="small">small</Option>
                <Option value="medium">medium</Option>
                <Option value="large">large</Option>
            </Select>
        </FormItem>
    </Form>
    <br/><br/>
    <Form labelAlign="inset" inline>
        <FormItem label="User Name:">
            <Input placeholder="Enter your name" id="insetUserName2" name="insetUserName2"/>
        </FormItem>
        <FormItem label="Password:" validateState="error" help="Password is required!">
            <Input htmlType="password" placeholder="Enter your password" id="insetPassword2" name="insetPassword2"/>
        </FormItem>
        <FormItem label="Size:">
            <Select style={{width: 150}}>
                <Option value="small">small</Option>
                <Option value="medium">medium</Option>
                <Option value="large">large</Option>
            </Select>
        </FormItem>
    </Form>
</div>, mountNode);

嵌套

FormItem 嵌套

查看源码在线预览

import { Form, Input, Grid } from '@alifd/next';
const FormItem = Form.Item;
const {Row, Col} = Grid;
const formItemLayout = {
    labelCol: {span: 4},
    wrapperCol: {span: 14}
};
const insetLayout = {
    labelCol: {fixedSpan: 3}
};
ReactDOM.render(<Form {...formItemLayout}>
    <FormItem id="control-input" label="Input Something：">
        <Row gutter="4">
            <Col>
                <FormItem label="Nest" labelAlign="inset" {...insetLayout} required requiredTrigger="onBlur" asterisk={false}>
                    <Input placeholder="Please enter..." name="firstname"/>
                </FormItem>
            </Col>
            <Col>
                <FormItem label="Nest" labelAlign="inset" {...insetLayout} required asterisk={false}>
                    <Input placeholder="need onChange" name="secondname" />
                </FormItem>
            </Col>
        </Row>
    </FormItem>
    <FormItem label="Bank Account：" >
        <Row gutter="4">
            <Col>
                <FormItem required requiredTrigger="onBlur">
                    <Input name="A"/>
                </FormItem>
            </Col>
            <Col>
                <FormItem required requiredTrigger="onBlur">
                    <Input name="B"/>
                </FormItem>
            </Col>
            <Col>
                <FormItem required requiredTrigger="onBlur">
                    <Input name="C"/>
                </FormItem>
            </Col>
            <Col>
                <FormItem required requiredTrigger="onBlur">
                    <Input name="D"/>
                </FormItem>
            </Col>
        </Row>
    </FormItem>
    <FormItem label=" ">
        <Form.Submit onClick={(v) => console.log(v)}>Submit</Form.Submit>
    </FormItem>
</Form>, mountNode);

自定义布局

标签位置：上、左

配合 Row Col 控制表单内元素布局 (注意：FormItem非Form直接子元素需要不能直接直接在Form上设置布局)

查看源码在线预览

import { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';
const FormItem = Form.Item;
const {Row, Col} = Grid;
const style = {
    padding: '20px',
    background: '#F7F8FA',
    margin: '20px'
};
const formItemLayout = {
    labelCol: {fixedSpan: 4}
};
const label = (<span>
name：<Balloon type="primary" trigger={<Icon type="prompt" size="small" />} closable={false}>blablablablablablablabla</Balloon>
</span>);
class Demo extends React.Component {
    state = {
        labelAlign: 'top'
    }
    handleChange = (v) => {
        this.setState({
            labelAlign: v ? 'left' : 'top'
        });
    }
    render() {
        const labelAlign = this.state.labelAlign;
        return (
            <div>
                <h3>Label Position</h3>
                <Switch checkedChildren="left" unCheckedChildren="top" checked={this.state.labelAlign === 'left'} onChange={this.handleChange} />
                <Form style={style}>
                    <Row gutter="4">
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label={label}
                                required
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Long search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Long search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Long search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col style={{ textAlign: 'right' }}>
                            <Button type="primary" style={{ marginRight: '5px' }}>Search</Button>
                            <Button >Clear All</Button>
                        </Col>
                    </Row>
                </Form>
                <Form style={style}>
                    <Row gutter="4">
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label={label}
                                required
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Long search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem {...formItemLayout} labelAlign={labelAlign}
                                label="Search name:"
                            >
                                <Input placeholder="Enter a search name:"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col style={{ textAlign: 'right' }}>
                            <Button type="primary" style={{ marginRight: '5px' }}>Search</Button>
                            <Button >Clear All</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

回车提交

需要Form里面有 htmlType="submit" 的元素

查看源码在线预览

import { Form, Input } from '@alifd/next';
const FormItem = Form.Item;
class Demo extends React.Component {
    onSubmit(e) {
        e.preventDefault(); // form will auto submit if remove this line
        console.log('onsubmit');
    }
    render() {
        return (
            <Form onSubmit={this.onSubmit.bind(this)}>
                <FormItem >
                    <Input placeholder="Enter Key can also trigger ‘onSubmit’"/>
                </FormItem>
                <Form.Submit htmlType="submit">submit</Form.Submit>
            </Form>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

响应式

可以通过配置 labelCol wrapperCol 的 Grid.Col 响应式属性实现响应式

查看源码在线预览

import { Form, Input, Select } from '@alifd/next';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {xxs: 4, l: 4},
    wrapperCol: {xxs: 20, l: 16}
};
ReactDOM.render(<Form {...formItemLayout} >
    <FormItem label="userName:">
        <Input />
    </FormItem>
    <FormItem label="password:">
        <Input htmlType="password" name="resPass" placeholder="Please Enter Password"/>
    </FormItem>
    <FormItem label="Country:">
        <Select placeholder="Please select a country" style={{width: '100%'}}>
            <option value="china">China</option>
            <option value="use">United States</option>
            <option value="japan">Japan</option>
            <option value="korean">South Korea</option>
            <option value="Thailand">Thailand</option>
        </Select>
    </FormItem>
    <FormItem label="Note:" help="something">
        <Input.TextArea placeholder="something" name="resReremark" />
    </FormItem>
    <FormItem label=" ">
        <Form.Submit>Submit</Form.Submit>
    </FormItem>
</Form>, mountNode);

校验提示

为 <FormItem> 定义 state 属性控制三种校验状态。

如果是 <Input> 组件, 可在<FormItem>上面添加 hasFeedback 控制图标的展示

注意: 反馈图标只对 <Input /> 有效。

查看源码在线预览

import { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};
ReactDOM.render(
    <Form {...formItemLayout}>
        <FormItem label="Input Error：" validateState="error" help="Please enter a numeric and alphabetic string">
            <Input defaultValue="Invalid choice"/>
        </FormItem>
        <FormItem label="Loading：" hasFeedback validateState="loading" help="Information Checking...">
            <Input defaultValue="Checking"/>
        </FormItem>
        <FormItem label="Success：" hasFeedback validateState="success">
            <Input defaultValue="Successful verification"/>
        </FormItem>
        <FormItem label="Datepicker：" validateState="error" help="Please select the correct date">
            <DatePicker />
        </FormItem>
        <FormItem label="Timepicker：" validateState="error" help="Please select the correct time">
            <TimePicker />
        </FormItem>
        <FormItem label="Select：" validateState="error" help="Please select a country">
            <Select placeholder="Please select a country">
                <option value="china">China</option>
                <option value="use">United States</option>
                <option value="japan">Japan</option>
                <option value="korean">South Korea</option>
                <option value="Thailand">Thailand</option>
            </Select>
        </FormItem>
        <FormItem label="NumberPicker：" validateState="error">
            <NumberPicker defaultValue={0} />
        </FormItem>
    </Form>
    , mountNode);

校验

基本的表单校验例子。

查看源码在线预览

import { Form, Input, Radio } from '@alifd/next';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};
class BasicDemo extends React.Component {
    userExists(rule, value) {
        return new Promise((resolve, reject) => {
            if (!value) {
                resolve();
            } else {
                setTimeout(() => {
                    if (value === 'frank') {
                        reject([new Error('Sorry, this username is already exist.')]);
                    } else {
                        resolve();
                    }
                }, 500);
            }
        });
    }
    render() {
        return (
            <Form {...formItemLayout} >
                <FormItem
                    label="Account:"
                    hasFeedback
                    validator={this.userExists.bind(this)}
                    help=""
                >
                    <Input placeholder="Input frank" name="valUsername" />
                    <Form.Error name="valUsername" >{
                        (errors, state) => {
                            if (state === 'loading') {
                                return 'loading...';
                            } else {
                                return errors;
                            }
                        }
                    }</Form.Error>
                </FormItem>
                <FormItem
                    label="Email:"
                    hasFeedback
                    required
                    requiredTrigger="onBlur"
                    format="email"
                >
                    <Input placeholder="Both trigget onBlur and onChange" name="valEmail" />
                </FormItem>
                <FormItem
                    label="Password:"
                    hasFeedback
                    required
                    requiredMessage="Please enter password"
                >
                    <Input htmlType="password" name="valPasswd" />
                </FormItem>
                <FormItem
                    label="Gender:"
                    hasFeedback
                    required
                    requiredMessage="Please select your gender"
                >
                    <RadioGroup name="valSex" >
                        <Radio value="male">Male</Radio>
                        <Radio value="female">Female</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem
                    label="Remarks:"
                    required
                    requiredMessage="Really do not intend to write anything?"
                >
                    <Input.TextArea maxLength={20} hasLimitHint placeholder="Everything is ok!" name="valTextarea" />
                </FormItem>
                <FormItem wrapperCol={{ offset: 6 }} >
                    <Form.Submit validate type="primary" onClick={(v, e) => console.log(v, e)} style={{marginRight: 10}}>Submit</Form.Submit>
                    <Form.Reset >Reset</Form.Reset>
                </FormItem>
            </Form>
        );
    }
}
ReactDOM.render(<BasicDemo />, mountNode);

校验

基本的表单校验例子。

查看源码在线预览

import { Form, Input, Field } from '@alifd/next';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};
class BasicDemo extends React.Component {
    field = new Field(this);
    render() {
        const {
            field,
            field: {
                init,
            }
        } = this;
        return (
            <Form {...formItemLayout} field={field} >
                <Form.Item label="test" key="test2">
                    <Input  {...init('input', {
                    rules: [{
                        validator(_rule, value, callback) {
                        callback(<span>This is a <em>CUSTOM</em> error</span>);
                        }
                    }]
                    })}  />
                </Form.Item>
                <FormItem wrapperCol={{ offset: 6 }} >
                    <Form.Submit validate type="primary">Submit</Form.Submit>
                    <Form.Reset >Reset</Form.Reset>
                </FormItem>
            </Form>
        );
    }
}
ReactDOM.render(<BasicDemo />, mountNode);

复杂功能(Field))

配合 Field 可以实现较复杂功能

查看源码在线预览

import { Form, Input, Radio, Field, Button } from '@alifd/next';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const formItemLayout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};
class BasicDemo extends React.Component {
    field = new Field(this);
    userExists(rule, value) {
        return new Promise((resolve, reject) => {
            if (!value) {
                resolve();
            } else {
                setTimeout(() => {
                    if (value === 'frank') {
                        reject([new Error('Sorry, this username is already occupied.')]);
                    } else {
                        resolve();
                    }
                }, 500);
            }
        });
    }
    checkPass(rule, value, callback) {
        const { validate } = this.field;
        if (value) {
            validate(['rePasswd']);
        }
        callback();
    }
    checkPass2(rule, value, callback) {
        const { getValue } = this.field;
        if (value && value !== getValue('passwd')) {
            return callback('Inconsistent password input twice!');
        } else {
            return callback();
        }
    }
    validate = () => {
        this.field.validate(['sex']);
    }
    render() {
        const {getState, getValue, getError} = this.field;
        return (
            <Form {...formItemLayout} field={this.field}>
                <FormItem
                    label="Username:"
                    hasFeedback
                    required
                    validator={this.userExists.bind(this)}
                    help={getState('username') === 'loading' ? 'Checking ...' : getError('username')}
                >
                    <Input placeholder="Input frank" name="username" />
                    <p>Hello {getValue('username')}</p>
                </FormItem>
                <FormItem
                    label="Password:"
                    hasFeedback
                    required
                    requiredMessage="Please enter password"
                    validator={this.checkPass.bind(this)}
                >
                    <Input htmlType="password" name="passwd" />
                </FormItem>
                <FormItem
                    label="Check your password:"
                    hasFeedback
                    required
                    requiredMessage="Enter your password again"
                    validator={this.checkPass2.bind(this)}
                >
                    <Input htmlType="password" placeholder="Enter the same password twice" name="rePasswd" />
                </FormItem>
                <FormItem
                    label="Gender:"
                    hasFeedback
                    required
                    requiredMessage="Please select your gender"
                >
                    <RadioGroup name="sex" >
                        <Radio value="male">Male</Radio>
                        <Radio value="female">Female</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem wrapperCol={{ offset: 6 }} >
                    <Button onClick={this.validate}>Validate by Field</Button>
                    <Form.Submit validate type="primary" onClick={(v, e) => console.log(v, e)} style={{margin: '0 10px'}}>Submit</Form.Submit>
                    <Form.Reset >Reset</Form.Reset>
                </FormItem>
            </Form>
        );
    }
}
ReactDOM.render(<BasicDemo />, mountNode);

表单组合

展示和表单相关的其他组件。

查看源码在线预览

import { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
const {Row, Col} = Grid;
const formItemLayout = {
    labelCol: {span: 6},
    wrapperCol: {span: 14}
};
class Demo extends React.Component {
    field = new Field(this);
    handleSubmit(value) {
        console.log('Form values：', value);
    }
    render() {
        const init = this.field.init;
        return (
            <Form {...formItemLayout} field={this.field}>
                <FormItem label="I'm the title：">
                    <p className="next-form-text-align">The quick brown fox jumps over the lazy dog.</p>
                    <p ><a href="#">Link</a></p>
                </FormItem>
                <FormItem label="Password:">
                    <Balloon trigger={<Input htmlType="password" {...init('pass')} />} align="r" closable={false} triggerType="hover">
                        input password
                    </Balloon>
                </FormItem>
                <FormItem label="NumberPicker:">
                    <NumberPicker min={1} max={10} name="numberPicker" defaultValue={3} />
                    <span>Something in here</span>
                </FormItem>
                <FormItem
                    label="Switch:"
                    required>
                    <Switch name="switch" defaultChecked />
                </FormItem>
                <FormItem label="Range:" required>
                    <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} name="range" />
                </FormItem>
                <FormItem label="Select:" required>
                    <Select style={{width: 200}} name="select">
                        <Option value="jack">jack</Option>
                        <Option value="lucy">lucy</Option>
                        <Option value="disabled" disabled>disabled</Option>
                        <Option value="hugohua">hugohua</Option>
                    </Select>
                </FormItem>
                <FormItem
                    label="DatePicker:"
                    labelCol={{span: 6}}
                    required>
                    <Row>
                        <FormItem style={{marginRight: 10, marginBottom: 0}}><DatePicker name="startDate"/></FormItem>
                        <FormItem style={{marginBottom: 0}}><DatePicker name="endDate" /></FormItem>
                    </Row>
                </FormItem>
                <FormItem
                    label="RangePicker:"
                    labelCol={{span: 6}}
                    required>
                    <RangePicker name="rangeDate"/>
                </FormItem>
                <FormItem
                    label="TimePicker:"
                    required>
                    <TimePicker name="time" />
                </FormItem>
                <FormItem
                    label="Checkbox:">
                    <Checkbox.Group name="checkbox">
                        <Checkbox value="a">option 1 </Checkbox>
                        <Checkbox value="b">option 2 </Checkbox>
                        <Checkbox disabled value="c">option 3（disabled）</Checkbox>
                    </Checkbox.Group>
                </FormItem>
                <FormItem
                    label="Radio:">
                    <Radio.Group name="radio">
                        <Radio value="apple">apple</Radio>
                        <Radio value="banana">banana</Radio>
                        <Radio disabled value="cherry">cherry（disabled）</Radio>
                    </Radio.Group>
                </FormItem>
                <FormItem
                    label="Logo："
                >
                    <Upload action="/upload.do" listType="text" name="upload" >
                        <Button type="primary" style={{margin: '0 0 10px'}}>Upload</Button>
                    </Upload>
                </FormItem>
                <Row style={{marginTop: 24}}>
                    <Col offset="6">
                        <Form.Submit type="primary" onClick={this.handleSubmit.bind(this)}>Submit</Form.Submit>
                    </Col>
                </Row>
            </Form>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);