docs: update demos of Form

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);
+````

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,8 +138,6 @@ 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">
@@ -159,7 +146,8 @@ let Demo = React.createClass({
                 label="密码：">
                 <Input {...passProps} type="password"
                   onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                    autoComplete="off" id="pass" />
+                  autoComplete="off" id="pass"
+                />
               </FormItem>
             </Col>
             <Col span="6">
@@ -174,15 +162,22 @@ let Demo = React.createClass({
                 label="确认密码：">
                 <Input {...rePassProps} type="password"
                   onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                    autoComplete="off" id="rePass" />
+                  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>
+            </Col>
+          </Row>
         </Form>
-        </Modal>
       </div>
     );
   }