Fix rjsf-team#488: Add a custom Form ErrorList prop.

Author: revolunet

README.md

@@ -52,6 +52,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Advanced customization](#advanced-customization)
  - [Field template](#field-template)
  - [Array Field Template](#array-field-template)
+ - [Error list Template](#error-list-template)
  - [Custom widgets and fields](#custom-widgets-and-fields)
  - [Custom widget components](#custom-widget-components)
  - [Custom component registration](#custom-component-registration)
@@ -809,6 +810,38 @@ The following props are part of each element in `items`:
 - `onReorderClick: (index, newIndex) => (event) => void`: Returns a function that swaps the items at `index` with `newIndex`.
 - `readonly`: A boolean value stating if the array item is readonly.
 
+### Error List template
+
+To take control over how the form errors are displayed, you can define an *error list template* for your form. This list is the form global error list that appears at the top of your forms.
+
+An error list template is basically a React stateless component being passed errors as props so you can render them as you like:
+
+```jsx
+function ErrorListTemplate(props) {
+ const {errors} = props;
+ return (
+ <div>
+ {errors.map((error, i) => {
+ return (
+ <li key={i}>
+ {error.stack}
+ </li>
+ );
+ })}
+ </div>
+ );
+}
+
+render((
+ <Form schema={schema}
+ showErrorList={true}
+ ErrorList={ErrorListTemplate} />,
+), document.getElementById("app"));
+```
+
+> Note: Your custom `ErrorList` template will only render when `showErrorList` is `true`.
+
+
 ### Custom widgets and fields
 
 The API allows to specify your own custom *widget* and *field* components:
@@ -1256,6 +1289,8 @@ render((
 ), document.getElementById("app"));
 ```
 
+> Note: you can also use your own [ErrorList](#error-list-template)
+
 ### The case of empty strings
 
 When a text input is empty, the field in form data is set to `undefined`. String fields that use `enum` and a `select` widget work similarly and will have an empty option at the top of the options list that when selected will result in the field being `undefined`.

src/components/Form.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from "react";
 
-import ErrorList from "./ErrorList";
+import { default as DefaultErrorList } from "./ErrorList";
 import {
  getDefaultFormState,
  shouldRender,
@@ -17,6 +17,7 @@ export default class Form extends Component {
  liveValidate: false,
  safeRenderCompletion: false,
  noHtml5Validate: false,
+ ErrorList: DefaultErrorList,
  };
 
  constructor(props) {
@@ -76,7 +77,7 @@ export default class Form extends Component {
 
  renderErrors() {
  const { status, errors } = this.state;
- const { showErrorList } = this.props;
+ const { ErrorList, showErrorList } = this.props;
  if (status !== "editing" && errors.length && showErrorList != false) {
  return <ErrorList errors={errors} />;
  }
@@ -208,6 +209,7 @@ if (process.env.NODE_ENV !== "production") {
  fields: PropTypes.objectOf(PropTypes.func),
  ArrayFieldTemplate: PropTypes.func,
  FieldTemplate: PropTypes.func,
+ ErrorList: PropTypes.func,
  onChange: PropTypes.func,
  onError: PropTypes.func,
  showErrorList: PropTypes.bool,

test/validate_test.js

@@ -1,3 +1,4 @@
+import React from "react";
 import { expect } from "chai";
 import sinon from "sinon";
 import { Simulate } from "react-addons-test-utils";
@@ -445,5 +446,32 @@ describe("Validation", () => {
  });
  });
  });
+
+ describe("Custom ErrorList", () => {
+ const schema = {
+ type: "string",
+ required: true,
+ minLength: 1,
+ };
+
+ const formData = 0;
+
+ const CustomErrorList = ({ errors }) => (
+ <div className="CustomErrorList">{errors.length} custom</div>
+ );
+
+ it("should use CustomErrorList", () => {
+ const { node } = createFormComponent({
+ schema,
+ liveValidate: true,
+ formData,
+ ErrorList: CustomErrorList,
+ });
+ expect(node.querySelectorAll(".CustomErrorList")).to.have.length.of(1);
+ expect(node.querySelector(".CustomErrorList").textContent).eql(
+ "1 custom"
+ );
+ });
+ });
  });
 });