form item passing anyother attrs (#19599)

components/form/FormItem.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Animate from 'rc-animate';
+import omit from 'omit.js';
 import Row from '../grid/row';
 import Col, { ColProps } from '../grid/col';
 import Icon from '../icon';
@@ -400,7 +401,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   }
 
   renderFormItem = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, style, className } = this.props;
+    const { prefixCls: customizePrefixCls, style, className, ...restProps } = this.props;
     const prefixCls = getPrefixCls('form', customizePrefixCls);
     const children = this.renderChildren(prefixCls);
     const itemClassName = {
@@ -410,7 +411,25 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     };
 
     return (
-      <Row className={classNames(itemClassName)} style={style} key="row">
+      <Row
+        className={classNames(itemClassName)}
+        style={style}
+        {...omit(restProps, [
+          'id', // It is deprecated because `htmlFor` is its replacement.
+          'htmlFor',
+          'label',
+          'labelAlign',
+          'labelCol',
+          'wrapperCol',
+          'help',
+          'extra',
+          'validateStatus',
+          'hasFeedback',
+          'required',
+          'colon',
+        ])}
+        key="row"
+      >
         {children}
       </Row>
     );

components/form/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    aria-hidden="true"
+    cccc="bbbb"
+    class="ant-row ant-form-item"
+    data-text="123"
+  >
+    <div
+      class="ant-col ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control"
+      >
+        <span
+          class="ant-form-item-children"
+        >
+          text
+        </span>
+      </div>
+    </div>
+  </div>
+</form>
+`;

components/form/__tests__/index.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prefer-stateless-function */
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, render } from 'enzyme';
 import Form from '..';
 import mountTest from '../../../tests/shared/mountTest';
 
@@ -13,6 +13,17 @@ describe('Form', () => {
     expect(wrapper.find('form').hasClass('ant-form-hide-required-mark')).toBe(true);
   });
 
+  it('Form.Item should support data-*、aria-* and custom attribute', () => {
+    const wrapper = render(
+      <Form>
+        <Form.Item data-text="123" aria-hidden="true" cccc="bbbb">
+          text
+        </Form.Item>
+      </Form>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('wrappedComponentRef', () => {
     it('warns on functional component', () => {
       if (process.env.REACT === '15') {