Feature request: Provide option to customise ErrorList HTML like ArrayFieldTemplate

[elisechant]

Description

It would be good to be able to write custom HTML for ErrorList at src/components/ErrorList.js in the same way we can for ArrayFieldTemplate.

[n1k0]

That would be a great feature to have indeed. Anybody willing to work on that?

[revolunet]

I also had to workaround that by creating a FieldTemplate with a custom ErrorList

would a ErrorList component props to the form do the trick ?

[n1k0]

I think we're talking about the general ErrorList, the one rendered at the top of the form, not the contextual field errors one, for which a field template works nicely. But yeah, having the ability to customize the top one would be good, and passing a custom ErrorList component as a form prop would probably work best.

[n1k0]

Yeah that's way too complicated, we should provide a simpler way. Who's willing to work on a PR? :)

[revolunet]

unless @elisechant wants to give a shot, i can try the form prop solution

[elisechant]

2 issues:

1. no way to produce form level errors
2. no way to trigger error based on an invalid server response

current workaround is to add global errors outside of form state, getting access to internal state by using a callback ref like <Form ref={(el) => this.form = el}:

class MyForm extends PureComponent {

  onSubmit({formData}) {
    return this.props.handleSubmit(formData).then((response) => {
      // success
    }).catch(error => {
      self.setState({
        globalErrors: [error && error.message ? error.message : 'Submit failed']
      });
      // can access internal form state from ref
      self.form.setState({status: "initial", errors: [], errorSchema: {}});
      return false;
    });
  }

  renderGlobalErrors() {
    const {globalErrors} = this.state;
    if (globalErrors && globalErrors.length) {
      return <div className="panel panel-danger errors">
        <ul className="list-group">{
          globalErrors.map((error, i) => {
            return (
              <li key={i} className="list-group-item text-danger">{
                error
              }</li>
            );
          })
        }</ul>
      </div>
    }
    return null;
  }

  render() {
    const {formData, schema, uiSchema} = this.state;

    return (
      <div>
        {this.renderGlobalErrors()}
        <Form ref={(el) => this.form = el} noHtml5Validate={true}
              autocomplete="off"
              formData={formData}
              schema={schema}
              uiSchema={uiSchema}
              onSubmit={this.onSubmit.bind(this)}/>
      </div>
    )
  }
}

Ideally the library might export some methods that could be used in place of indirect updates to internal form state or provide an optional wrapper component that does a global error state. Hard coding works for me for now but its not ideal.

[n1k0]

Released in v0.44.0.