From 10edd74f33ca0ea24ab993d9dee3108265f81f17 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 12 Apr 2016 15:18:57 +0800
Subject: [PATCH] docs: update demos of Form

---
 components/form/demo/form-in-modal.md       | 64 ++++++++++++++++
 components/form/demo/validate-customized.md | 85 ++++++++++-----------
 2 files changed, 104 insertions(+), 45 deletions(-)
 create mode 100644 components/form/demo/form-in-modal.md

diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
new file mode 100644
index 0000000000..f3111ef40b
--- /dev/null
+++ b/components/form/demo/form-in-modal.md
@@ -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);
+````
diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md
index d93b7b6cf2..07975f3ea0 100644
--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@@ -9,7 +9,7 @@
 ---
 
 ````jsx
-import { Button, Form, Input, Row, Col, Modal } from 'antd';
+import { Button, Form, Input, Row, Col } from 'antd';
 import classNames from 'classnames';
 const createForm = Form.create;
 const FormItem = Form.Item;
@@ -25,7 +25,6 @@ let Demo = React.createClass({
       rePassBarShow: false,
       passStrength: 'L', // 密码强度
       rePassStrength: 'L',
-      visible: false,
     };
   },
 
@@ -37,7 +36,6 @@ let Demo = React.createClass({
       }
       console.log('Submit!!!');
       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) {
     const form = this.props.form;
     this.getPassStrenth(value, 'pass');
@@ -127,7 +117,6 @@ let Demo = React.createClass({
   render() {
     const { getFieldProps } = this.props.form;
 
-    // 如果觉得在 JSX 中写 `getFieldProps` 会影响阅读，可以先用变量保存 `getFieldProps` 的返回值。
     const passProps = getFieldProps('pass', {
       rules: [
         { required: true, whitespace: true, message: '请填写密码' },
@@ -149,40 +138,46 @@ let Demo = React.createClass({
     };
     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}>
-            <Row>
-              <Col span="18">
-                <FormItem
-                  {...formItemLayout}
-                  label="密码：">
-                  <Input {...passProps} type="password"
-                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                    autoComplete="off" id="pass" />
-                </FormItem>
-              </Col>
-              <Col span="6">
-                {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
-              </Col>
-            </Row>
-
-            <Row>
-              <Col span="18">
-                <FormItem
-                  {...formItemLayout}
-                  label="确认密码：">
-                  <Input {...rePassProps} type="password"
-                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                    autoComplete="off" id="rePass" />
-                </FormItem>
-              </Col>
-              <Col span="6">
-                {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
+        <Form horizontal form={this.props.form}>
+          <Row>
+            <Col span="18">
+              <FormItem
+                {...formItemLayout}
+                label="密码：">
+                <Input {...passProps} type="password"
+                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
+                  autoComplete="off" id="pass"
+                />
+              </FormItem>
+            </Col>
+            <Col span="6">
+              {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
+            </Col>
+          </Row>
+
+          <Row>
+            <Col span="18">
+              <FormItem
+                {...formItemLayout}
+                label="确认密码：">
+                <Input {...rePassProps} type="password"
+                  onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
+                  autoComplete="off" id="rePass"
+                />
+              </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>
-            </Row>
-          </Form>
-        </Modal>
+            </Col>
+          </Row>
+        </Form>
       </div>
     );
   }