set form id on demo

fix #10218

components/form/demo/advanced-search.md

@@ -93,7 +93,7 @@ class AdvancedSearchForm extends React.Component {
   }
 }
 
-const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);
+const WrappedAdvancedSearchForm = Form.create({ name: 'advanced_search' })(AdvancedSearchForm);
 ReactDOM.render(
   <div>
     <WrappedAdvancedSearchForm />

components/form/demo/coordinated.md

@@ -82,7 +82,7 @@ class App extends React.Component {
   }
 }
 
-const WrappedApp = Form.create()(App);
+const WrappedApp = Form.create({ name: 'coordinated' })(App);
 
 ReactDOM.render(<WrappedApp />, mountNode);
 ````

components/form/demo/customized-form-controls.md

@@ -136,7 +136,7 @@ class Demo extends React.Component {
   }
 }
 
-const WrappedDemo = Form.create()(Demo);
+const WrappedDemo = Form.create({ name: 'customized_form_controls' })(Demo);
 
 ReactDOM.render(<WrappedDemo />, mountNode);
 ````

components/form/demo/dynamic-form-item.md

@@ -122,7 +122,7 @@ class DynamicFieldSet extends React.Component {
   }
 }
 
-const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet);
+const WrappedDynamicFieldSet = Form.create({ name: 'dynamic_form_item' })(DynamicFieldSet);
 ReactDOM.render(<WrappedDynamicFieldSet />, mountNode);
 ````
 

components/form/demo/dynamic-rule.md

@@ -93,7 +93,7 @@ class DynamicRule extends React.Component {
   }
 }
 
-const WrappedDynamicRule = Form.create()(DynamicRule);
+const WrappedDynamicRule = Form.create({ name: 'dynamic_rule' })(DynamicRule);
 ReactDOM.render(<WrappedDynamicRule />, mountNode);
 
 ````

components/form/demo/form-in-modal.md

@@ -20,7 +20,7 @@ import {
 
 const FormItem = Form.Item;
 
-const CollectionCreateForm = Form.create()(
+const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
   // eslint-disable-next-line
   class extends React.Component {
     render() {

components/form/demo/global-state.md

@@ -23,6 +23,7 @@ import { Form, Input } from 'antd';
 const FormItem = Form.Item;
 
 const CustomizedForm = Form.create({
+  name: 'global_state',
   onFieldsChange(props, changedFields) {
     props.onChange(changedFields);
   },

components/form/demo/horizontal-login.md

@@ -83,7 +83,7 @@ class HorizontalLoginForm extends React.Component {
   }
 }
 
-const WrappedHorizontalLoginForm = Form.create()(HorizontalLoginForm);
+const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm);
 
 ReactDOM.render(<WrappedHorizontalLoginForm />, mountNode);
 ````

components/form/demo/normal-login.md

@@ -66,7 +66,7 @@ class NormalLoginForm extends React.Component {
   }
 }
 
-const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
+const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
 
 ReactDOM.render(<WrappedNormalLoginForm />, mountNode);
 ````

components/form/demo/register.md

@@ -263,7 +263,7 @@ class RegistrationForm extends React.Component {
   }
 }
 
-const WrappedRegistrationForm = Form.create()(RegistrationForm);
+const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);
 
 ReactDOM.render(<WrappedRegistrationForm />, mountNode);
 ````

components/form/demo/time-related-controls.md

@@ -130,7 +130,7 @@ class TimeRelatedForm extends React.Component {
   }
 }
 
-const WrappedTimeRelatedForm = Form.create()(TimeRelatedForm);
+const WrappedTimeRelatedForm = Form.create({ name: 'time_related_controls' })(TimeRelatedForm);
 
 ReactDOM.render(<WrappedTimeRelatedForm />, mountNode);
 ````

components/form/demo/validate-other.md

@@ -205,7 +205,7 @@ class Demo extends React.Component {
   }
 }
 
-const WrappedDemo = Form.create()(Demo);
+const WrappedDemo = Form.create({ name: 'validate_other' })(Demo);
 
 ReactDOM.render(<WrappedDemo />, mountNode);
 ````

components/form/demo/validate-static.md

@@ -84,7 +84,7 @@ ReactDOM.render(
       hasFeedback
       validateStatus="warning"
     >
-      <Input placeholder="Warning" id="warning" />
+      <Input placeholder="Warning" id="warning2" />
     </FormItem>
 
     <FormItem
@@ -94,7 +94,7 @@ ReactDOM.render(
       validateStatus="error"
       help="Should be combination of numbers & alphabets"
     >
-      <Input placeholder="unavailable choice" id="error" />
+      <Input placeholder="unavailable choice" id="error2" />
     </FormItem>
 
     <FormItem

components/form/index.en-US.md

@@ -54,6 +54,7 @@ The following `options` are available:
 | Property | Description | Type |
 | -------- | ----------- | ---- |
 | mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField) | (props) => ({ \[fieldName\]: FormField { value } }) |
+| name | Set the id prefix of fields under form | - |
 | validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { [nested.path]: String } |
 | onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
 | onValuesChange | A handler while value of any field is changed | (props, changedValues, allValues) => void |

components/form/index.zh-CN.md

@@ -56,6 +56,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | 参数 | 说明 | 类型 |
 | --- | --- | --- |
 | mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记 | (props) => ({ \[fieldName\]: FormField { value } }) |
+| name | 设置表单域内字段 id 的前缀 | - |
 | validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { [nested.path]: String } |
 | onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
 | onValuesChange | 任一表单域的值发生改变时的回调 | (props, changedValues, allValues) => void |

components/style/themes/default.less

@@ -170,6 +170,9 @@
 @checkbox-check-color : #fff;
 @checkbox-border-width : @border-width-base;
 
+// Empty
+@empty-size: @font-size-base;
+
 // Radio
 @radio-size : 16px;
 @radio-dot-color : @primary-color;

package.json

@@ -64,7 +64,7 @@
     "rc-drawer": "~1.7.6",
     "rc-dropdown": "~2.2.1",
     "rc-editor-mention": "^1.1.7",
-    "rc-form": "^2.2.7",
+    "rc-form": "^2.3.0",
     "rc-input-number": "~4.3.7",
     "rc-menu": "~7.4.12",
     "rc-notification": "~3.3.0",