Merge pull request #986 from ant-design/fix-formItem

fix: should not set required to label #985

components/form/FormItem.jsx

@@ -114,8 +114,13 @@ class FormItem extends React.Component {
       this.isRequired() :
       props.required;
 
+    const className = classNames({
+      [this._getLayoutClass(labelCol)]: true,
+      [`${props.prefixCls}-item-required`]: required,
+    });
+
     return props.label ? (
-      <label htmlFor={props.id || this.getId()} className={this._getLayoutClass(labelCol)} required={required} key="label">
+      <label htmlFor={props.id || this.getId()} className={className} key="label">
         {props.label}
       </label>
     ) : null;

components/form/demo/horizontal-form.md

@@ -36,7 +36,7 @@ let Demo = React.createClass({
         <FormItem
           label="您的性别："
           labelCol={{ span: 6 }}
-          wrapperCol={{ span: 14 }}d>
+          wrapperCol={{ span: 14 }}>
             <RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
               <Radio value="male">男的</Radio>
               <Radio value="female">女的</Radio>
@@ -50,7 +50,7 @@ let Demo = React.createClass({
           <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
         </FormItem>
         <FormItem
-          wrapperCol={{ span: 14, offset: 6 }} >
+          wrapperCol={{ span: 14, offset: 6 }}>
           <label>
             <Checkbox {...getFieldProps('agreement')} />同意
           </label>

style/components/form.less

@@ -4,14 +4,6 @@
 
 label {
   position: relative;
-  &[required]:before {
-    display: inline-block;
-    margin-right: 4px;
-    content: "*";
-    font-family: SimSun;
-    font-size: @font-size-base;
-    color: @label-required-color;
-  }
 
   > .@{iconfont-css-prefix} {
     vertical-align: top;
@@ -19,6 +11,15 @@ label {
   }
 }
 
+.@{css-prefix}form-item-required:before {
+  display: inline-block;
+  margin-right: 4px;
+  content: "*";
+  font-family: SimSun;
+  font-size: @font-size-base;
+  color: @label-required-color;
+}
+
 // Input styles
 .@{css-prefix}input {
   .input;