mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 15:39:45 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

docs: update demos of Form

Browse Source
This commit is contained in:
Benjy Cui 2016-04-12 15:18:57 +08:00
parent 5bb8e31ad4
commit 10edd74f33
2 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/form/demo/form-in-modal.md Normal file
View File

@ -0,0 +1,64 @@
# 与 Modal 配合使用
- order: 14
在 Modal 中使用 Form，当点击 Modal 的确定时，调用 `this.props.form.getFieldsValue` 获取表单内的值。
---
````jsx
import { Button, Form, Input, Modal } from 'antd';
const createForm = Form.create;
const FormItem = Form.Item;
let Demo = React.createClass({
getInitialState() {
return { visible: false };
},
handleSubmit() {
console.log(this.props.form.getFieldsValue());
this.hideModal();
},
showModal() {
this.setState({ visible: true });
},
hideModal() {
this.setState({ visible: false });
},
render() {
const { getFieldProps } = this.props.form;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
};
return (
<div>
<Button type="primary" onClick={this.showModal}>点击有惊喜</Button>
<Modal title="登录" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名：">
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码：">
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
</FormItem>
</Form>
</Modal>
</div>
);
}
});
Demo = createForm()(Demo);
ReactDOM.render(<Demo />, mountNode);
````

83
components/form/demo/validate-customized.md
View File

@ -9,7 +9,7 @@
--- ---
````jsx ````jsx
import { Button, Form, Input, Row, Col, Modal } from 'antd'; import { Button, Form, Input, Row, Col } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
const createForm = Form.create; const createForm = Form.create;
const FormItem = Form.Item; const FormItem = Form.Item;
@ -25,7 +25,6 @@ let Demo = React.createClass({
rePassBarShow: false, rePassBarShow: false,
passStrength: 'L', // 密码强度 passStrength: 'L', // 密码强度
rePassStrength: 'L', rePassStrength: 'L',
visible: false,
}; };
}, },
@ -37,7 +36,6 @@ let Demo = React.createClass({
} }
console.log('Submit!!!'); console.log('Submit!!!');
console.log(values); console.log(values);
this.setState({ visible: false });
}); });
}, },
@ -66,14 +64,6 @@ let Demo = React.createClass({
} }
}, },
showModal() {
this.setState({ visible: true });
},
hideModal() {
this.setState({ visible: false });
},
checkPass(rule, value, callback) { checkPass(rule, value, callback) {
const form = this.props.form; const form = this.props.form;
this.getPassStrenth(value, 'pass'); this.getPassStrenth(value, 'pass');
@ -127,7 +117,6 @@ let Demo = React.createClass({
render() { render() {
const { getFieldProps } = this.props.form; const { getFieldProps } = this.props.form;
// 如果觉得在 JSX 中写 `getFieldProps` 会影响阅读，可以先用变量保存 `getFieldProps` 的返回值。
const passProps = getFieldProps('pass', { const passProps = getFieldProps('pass', {
rules: [ rules: [
{ required: true, whitespace: true, message: '请填写密码' }, { required: true, whitespace: true, message: '请填写密码' },
@ -149,40 +138,46 @@ let Demo = React.createClass({
}; };
return ( return (
<div> <div>
<Button type="primary" onClick={this.showModal}>修改密码</Button> <Form horizontal form={this.props.form}>
<Modal title="修改密码" visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}> <Row>
<Form horizontal form={this.props.form}> <Col span="18">
<Row> <FormItem
<Col span="18"> {...formItemLayout}
<FormItem label="密码：">
{...formItemLayout} <Input {...passProps} type="password"
label="密码："> onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
<Input {...passProps} type="password" autoComplete="off" id="pass"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
autoComplete="off" id="pass" /> </FormItem>
</FormItem> </Col>
</Col> <Col span="6">
<Col span="6"> {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
{this.state.passBarShow ? this.renderPassStrengthBar('pass') : null} </Col>
</Col> </Row>
</Row>
<Row> <Row>
<Col span="18"> <Col span="18">
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label="确认密码："> label="确认密码：">
<Input {...rePassProps} type="password" <Input {...rePassProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="rePass" /> autoComplete="off" id="rePass"
</FormItem> />
</FormItem>
</Col>
<Col span="6">
{this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
</Col>
</Row>
<Row>
<Col span="18">
<Col span="18" offset="6">
<Button type="primary" onClick={this.handleSubmit}>提交</Button>
</Col> </Col>
<Col span="6"> </Col>
{this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null} </Row>
</Col> </Form>
</Row>
</Form>
</Modal>
</div> </div>
); );
} }