From 512941c65badb1aab68e78b6b6704fb95aad4c8a Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Mon, 1 Feb 2016 10:23:06 +0800
Subject: [PATCH] fix: should get meta from children

---
 components/form/FormItem.jsx                |  26 ++--
 components/form/demo/validate-basic.md      |   7 +-
 components/form/demo/validate-customized.md | 133 ++++++++++----------
 components/form/index.md                    |   2 -
 4 files changed, 77 insertions(+), 91 deletions(-)

diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index 120f62bf09..c3c28167eb 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import objectAssign from 'object-assign';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
@@ -33,6 +32,10 @@ class FormItem extends React.Component {
     return this.props.children.props && this.props.children.props.id;
   }
 
+  getMeta() {
+    return this.props.children.props && this.props.children.props.__meta;
+  }
+
   renderHelp() {
     const props = this.props;
     const prefixCls = props.prefixCls;
@@ -94,11 +97,8 @@ class FormItem extends React.Component {
 
   isRequired() {
     if (this.context.form) {
-      const meta = this.props.fieldOption || {};
-
-      // Have to merge manually, for children have no `__meta` now.
+      const meta = this.getMeta() || {};
       const validate = (meta.validate || []);
-      validate.push({ rules: meta.rules });
 
       return validate.filter((item) => !!item.rules).some((item) => {
         return item.rules.some((rule) => rule.required);
@@ -122,23 +122,13 @@ class FormItem extends React.Component {
   }
 
   renderChildren() {
-    const context = this.context;
     const props = this.props;
     const children = React.Children.map(props.children, (child) => {
-      // If <Component />&nbsp;&nbsp;&nbsp;<Component />,
-      // React will not convert &nbsp;&nbsp;&nbsp; into component.
-      if (!child.type) {
-        return child;
+      if (typeof child.type === 'function' && !child.props.size) {
+        return React.cloneElement(child, { size: 'large' });
       }
 
-      const childProps = {};
-      if (typeof child.type === 'function' && !child.props.size) {
-        objectAssign(childProps, { size: 'large' });
-      }
-      if (context.form && this.getId()) {
-        objectAssign(childProps, context.form.getFieldProps(this.getId(), props.fieldOption));
-      }
-      return React.cloneElement(child, childProps);
+      return child;
     });
     return [
       this.renderLabel(),
diff --git a/components/form/demo/validate-basic.md b/components/form/demo/validate-basic.md
index 9e11ec12a8..23375e65d4 100644
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@@ -77,7 +77,7 @@ class BasicDemo extends React.Component {
   }
 
   render() {
-    const { getFieldProps } = this.props.form;
+    const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
 
     return (
       <Form horizontal form={this.props.form}>
@@ -85,14 +85,15 @@ class BasicDemo extends React.Component {
           label="用户名："
           labelCol={{ span: 7 }}
           wrapperCol={{ span: 12 }}
-          hasFeedback>
+          hasFeedback
+          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
           <Input placeholder="实时校验，输入 JasonWood 看看"
             {...getFieldProps('name', {
               rules: [
                 { required: true, min: 5, message: '用户名至少为 5 个字符' },
                 { validator: this.userExists },
               ],
-            })}/>
+            })} />
         </FormItem>
 
         <FormItem
diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md
index 11b8a22833..5fca5e6e64 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 } from 'antd';
+import { Button, Form, Input, Row, Col, Modal } from 'antd';
 import classNames from 'classnames';
 const createForm = Form.create;
 const FormItem = Form.Item;
@@ -24,12 +24,12 @@ let Demo = React.createClass({
       passBarShow: false, // 是否显示密码强度提示条
       rePassBarShow: false,
       passStrength: 'L', // 密码强度
-      rePassStrength: 'L'
+      rePassStrength: 'L',
+      visible: false,
     };
   },
 
-  handleSubmit(e) {
-    e.preventDefault();
+  handleSubmit() {
     this.props.form.validateFields((errors, values) => {
       if (!!errors) {
         console.log('Errors in form!!!');
@@ -37,14 +37,10 @@ let Demo = React.createClass({
       }
       console.log('Submit!!!');
       console.log(values);
+      this.setState({ visible: false });
     });
   },
 
-  handleReset(e) {
-    e.preventDefault();
-    this.props.form.resetFields();
-  },
-
   getPassStrenth(value, type) {
     if (value) {
       let strength;
@@ -70,6 +66,14 @@ 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');
@@ -123,66 +127,59 @@ let Demo = React.createClass({
   render() {
     const { getFieldProps } = this.props.form;
     return (
-      <Form horizontal form={this.props.form}>
-        <Row>
-          <Col span="18">
-            <FormItem
-              label="密码："
-              labelCol={{ span: 6 }}
-              wrapperCol={{ span: 18 }}>
-              <Input type="password"
-                {...getFieldProps('pass', {
-                  rules: [
-                    { required: true, whitespace: true, message: '请填写密码' },
-                    { validator: this.checkPass }
-                  ]
-                })}
-                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>
+      <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
+                  label="密码："
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}>
+                  <Input type="password"
+                    {...getFieldProps('pass', {
+                      rules: [
+                        { required: true, whitespace: true, message: '请填写密码' },
+                        { validator: this.checkPass }
+                      ]
+                    })}
+                    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
-              label="确认密码："
-              labelCol={{ span: 6 }}
-              wrapperCol={{ span: 18 }}>
-              <Input type="password"
-                {...getFieldProps('rePass', {
-                  rules: [{
-                    required: true,
-                    whitespace: true,
-                    message: '请再次输入密码',
-                  }, {
-                    validator: this.checkPass2,
-                  }],
-                })}
-                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">
-            <FormItem
-              wrapperCol={{ span: 12, offset: 6 }}>
-              <Button type="primary" onClick={this.handleSubmit}>确定</Button>
-              &nbsp;&nbsp;&nbsp;
-              <Button type="ghost" onClick={this.handleReset}>重置</Button>
-            </FormItem>
-          </Col>
-          <Col span="6" />
-        </Row>
-      </Form>
+            <Row>
+              <Col span="18">
+                <FormItem
+                  label="确认密码："
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}>
+                  <Input type="password"
+                    {...getFieldProps('rePass', {
+                      rules: [{
+                        required: true,
+                        whitespace: true,
+                        message: '请再次输入密码',
+                      }, {
+                        validator: this.checkPass2,
+                      }],
+                    })}
+                    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>
+          </Form>
+        </Modal>
+      </div>
     );
   }
 });
diff --git a/components/form/index.md b/components/form/index.md
index 3bf1ecfb42..935b3faf06 100644
--- a/components/form/index.md
+++ b/components/form/index.md
@@ -105,8 +105,6 @@ CustomizedForm = Form.create({})(CustomizedForm);
 |  hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool |  | false  |
 |  prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string |  |  'ant-form' |
 
-`Form.Item` 内的菜单控件必须设置 `id: String`，且必须唯一。
-
 ### Input
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |