Skip to content

Commit

Permalink
doc: add custom ErrorList for rjsf-team#488
Browse files Browse the repository at this point in the history
  • Loading branch information
revolunet committed Mar 10, 2017
1 parent 06d3d8c commit 4c3fd1b
Showing 1 changed file with 35 additions and 0 deletions.
35 changes: 35 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.

An error list template is basically a React stateless component being passed errors as props so you can display them as you like:

```jsx
function CustomErrorListTemplate(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={CustomErrorListTemplate} />,
), 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:
Expand Down Expand Up @@ -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`.
Expand Down

0 comments on commit 4c3fd1b

Please sign in to comment.