feat: make Form validation work with Modal

components/form/FormItem.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import objectAssign from 'object-assign';
 
 function prefixClsFn(prefixCls, ...args) {
   return args.map((s) => {
@@ -32,10 +33,6 @@ 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;
@@ -97,8 +94,13 @@ class FormItem extends React.Component {
 
   isRequired() {
     if (this.context.form) {
-      const meta = this.getMeta() || {};
-      return (meta.validate || []).some((item) => {
+      const meta = this.props.fieldOption || {};
+
+      // Have to merge manually, for children have no `__meta` now.
+      const validate = (meta.validate || []);
+      validate.push({ rules: meta.rules });
+
+      return validate.filter((item) => !!item.rules).some((item) => {
         return item.rules.some((rule) => rule.required);
       });
     }
@@ -120,12 +122,23 @@ class FormItem extends React.Component {
   }
 
   renderChildren() {
+    const context = this.context;
     const props = this.props;
     const children = React.Children.map(props.children, (child) => {
-      if (typeof child.type === 'function' && !child.props.size) {
-        return React.cloneElement(child, { size: 'large' });
+      // If <Component />&nbsp;&nbsp;&nbsp;<Component />,
+      // React will not convert &nbsp;&nbsp;&nbsp; into component.
+      if (!child.type) {
+        return child;
       }
-      return child;
+
+      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 [
       this.renderLabel(),

components/form/demo/validate-basic.md

@@ -174,4 +174,4 @@ class BasicDemo extends React.Component {
 BasicDemo = createForm()(BasicDemo);
 
 ReactDOM.render(<BasicDemo />, mountNode);
-````
+````

components/form/demo/validate-customized.md

@@ -138,7 +138,7 @@ let Demo = React.createClass({
                   ]
                 })}
                 onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                autoComplete="off"/>
+                autoComplete="off" id="pass" />
             </FormItem>
           </Col>
           <Col span="6">
@@ -163,7 +163,7 @@ let Demo = React.createClass({
                   }],
                 })}
                 onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
-                autoComplete="off" />
+                autoComplete="off" id="rePass" />
             </FormItem>
           </Col>
           <Col span="6">

components/form/index.md

@@ -105,6 +105,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 |  hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool |  | false  |
 |  prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string |  |  'ant-form' |
 
+`Form.Item` 内的菜单控件必须设置 `id: String`，且必须唯一。
 
 ### Input