Introduce the showErrorList prop for hiding the top error list (rjsf-team#269)

Author: garykw

README.md

@@ -52,6 +52,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Form data validation](#form-data-validation)
  - [Live validation](#live-validation)
  - [Custom validation](#custom-validation)
+ - [Error List Display](#error-list-display)
  - [Styling your forms](#styling-your-forms)
  - [Schema definitions and references](#schema-definitions-and-references)
  - [JSON Schema supporting status](#json-schema-supporting-status)
@@ -709,7 +710,6 @@ The `registry` is an object containing the registered custom fields and widgets
  - `definitions`: The root schema [definitions](#schema-definitions-and-references), if any.
 
 The registry is passed down the component tree, so you can access it from your custom field and `SchemaField` components.
-
 ### Custom SchemaField
 
 **Warning:** This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.
@@ -837,6 +837,27 @@ render(<Form schema={schema} validate={validate} />);
 > received as second argument.
 > - The `validate()` function is called **after** the JSON schema validation.
 
+### Error List Display
+
+Form data allows you to hide the display of the validation Header.
+
+To disable the Error List display, you can set Form's showErrorList prop to false. Doing so will still validate the form but only the inline display will show.
+
+```js
+const schema = {
+ type: "object",
+ required: ["foo"],
+ properties: {
+ foo: {type: "string"},
+ bar: {type: "string"},
+ }
+};
+
+render(<Form schema={schema} showErrorList={false}/>);
+
+```
+
+
 
 ## Styling your forms
 

src/components/Form.js

@@ -69,7 +69,9 @@ export default class Form extends Component {
 
  renderErrors() {
  const {status, errors} = this.state;
- if (status !== "editing" && errors.length) {
+ const {showErrorList} = this.props;
+
+ if (status !== "editing" && errors.length && showErrorList != false) {
  return <ErrorList errors={errors} />;
  }
  return null;
@@ -193,6 +195,7 @@ if (process.env.NODE_ENV !== "production") {
  fields: PropTypes.objectOf(PropTypes.func),
  onChange: PropTypes.func,
  onError: PropTypes.func,
+ showErrorList: PropTypes.bool,
  onSubmit: PropTypes.func,
  id: PropTypes.string,
  className: PropTypes.string,

test/validate_test.js

@@ -330,5 +330,51 @@ describe("Validation", () => {
  });
  });
  });
+
+ describe("showErrorList prop validation", () => {
+ describe("Required fields", () => {
+ const schema = {
+ type: "object",
+ required: ["foo"],
+ properties: {
+ foo: {type: "string"},
+ bar: {type: "string"},
+ }
+ };
+
+ var comp, node, onError;
+
+ beforeEach(() => {
+ onError = sandbox.spy();
+ const compInfo = createFormComponent({schema, formData: {
+ foo: undefined
+ }, onError, showErrorList: false});
+ comp = compInfo.comp;
+ node = compInfo.node;
+
+ Simulate.submit(node);
+ });
+
+ it("should validate a required field", () => {
+ expect(comp.state.errors)
+ .to.have.length.of(1);
+ expect(comp.state.errors[0].message)
+ .eql(`requires property "foo"`);
+ });
+
+ it("should not render error list if showErrorList prop true", () => {
+ expect(node.querySelectorAll(".errors li"))
+ .to.have.length.of(0);
+ });
+
+ it("should trigger the onError handler", () => {
+ sinon.assert.calledWith(onError, sinon.match(errors => {
+ return errors[0].message === `requires property "foo"`;
+ }));
+ });
+ });
+
+ });
+
  });
 });