formItem support error message with reactNode (#13046)

close #13014

components/form/FormItem.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
-import intersperse from 'intersperse';
 import Animate from 'rc-animate';
 import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
 import Row from '../grid/row';
@@ -27,6 +26,10 @@ export interface FormItemProps {
   colon?: boolean;
 }
 
+function intersperseSpace<T>(list: Array<T>): Array<T | string> {
+  return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
+}
+
 export interface FormItemContext {
   vertical: boolean;
 }
@@ -72,13 +75,18 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     if (help === undefined && this.getOnlyControl()) {
       const errors = this.getField().errors;
       if (errors) {
-        return intersperse(
-          errors.map((e: any, index: number) =>
-            React.isValidElement(e.message)
-              ? React.cloneElement(e.message, { key: index })
-              : e.message,
-          ),
-          ' ',
+        return intersperseSpace(
+          errors.map((e: any, index: number) => {
+            let node: React.ReactElement<any> | null = null;
+
+            if (React.isValidElement(e)) {
+              node = e;
+            } else if (React.isValidElement(e.message)) {
+              node = e.message;
+            }
+
+            return node ? React.cloneElement(node, { key: index }) : e.message;
+          }),
         );
       }
       return '';

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

@@ -98,3 +98,54 @@ exports[`Form should display two message 1`] = `
   </div>
 </form>
 `;
+
+exports[`Form support error message with reactNode 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item ant-form-item-with-help"
+  >
+    <div
+      class="ant-form-item-label"
+    >
+      <label
+        class=""
+        for="account"
+        title="Account"
+      >
+        Account
+      </label>
+    </div>
+    <div
+      class="ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control has-error"
+      >
+        <span
+          class="ant-form-item-children"
+        >
+          <input
+            data-__field="[object Object]"
+            data-__meta="[object Object]"
+            id="account"
+            value=""
+          />
+        </span>
+        <div
+          class="ant-form-explain show-help-enter"
+        >
+          <div>
+            Error 1
+          </div>
+           
+          <div>
+            Error 2
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;

components/form/__tests__/message.test.js

@@ -65,4 +65,26 @@ describe('Form', () => {
     wrapper.update();
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('support error message with reactNode', () => {
+    let myForm;
+    const Form1 = Form.create()(({ form }) => {
+      myForm = form;
+      return (
+        <Form>
+          <Form.Item label="Account">{form.getFieldDecorator('account')(<input />)}</Form.Item>
+        </Form>
+      );
+    });
+
+    const wrapper = mount(<Form1 />);
+
+    myForm.setFields({
+      account: {
+        errors: [<div>Error 1</div>, <div>Error 2</div>],
+      },
+    });
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

package.json

@@ -49,7 +49,6 @@
     "css-animation": "^1.5.0",
     "dom-closest": "^0.2.0",
     "enquire.js": "^2.1.6",
-    "intersperse": "^1.0.0",
     "lodash": "^4.17.11",
     "moment": "^2.22.2",
     "omit.js": "^1.0.0",

typings/custom-typings.d.ts

@@ -95,9 +95,7 @@ declare module 'lodash/debounce';
 
 declare module 'lodash/uniqBy';
 
-declare module 'raf';
-
-declare module 'intersperse';
+declare module "raf";
 
 declare module 'react-lifecycles-compat';