-
Notifications
You must be signed in to change notification settings - Fork 15
Error messages customisation
Charly POLY edited this page Jun 8, 2018
·
3 revisions
By default, <ApolloForm> do not display errors.
To enable it, you should provide some options to ui prop.
There is 2 errors modes list or inline.
The ui have 3 properties specific to error management:
type ApolloFormUi = {
showErrorsList?: boolean; // show error list at the top of the form
showErrorsInline?: boolean; // show error at field level
errorListComponent?: ErrorListComponent; // provide a custom component for error list
};The component will receive ErrorListComponentProps:
type ErrorListComponentProps = {
errors: ReactJsonschemaFormError[];
errorSchema: object;
schema: object;
uiSchema: UiSchema;
formContext: object;
}Example of ErrorList component
import * as React from 'react';
import { ErrorListComponent } from 'react-apollo-form';
import { Message } from 'semantic-ui-react';
const ErrorList: ErrorListComponent = p => (
<Message
error={true}
visible={true}
header="There was some errors"
list={p.errors.map(e => e.message)}
/>
);When passing ui.showErrorsInline at true, a showErrorsInline property will be accessible from formContext.
This formContext is accessible in all fields, templates and widgets components, so you can implement yourself the errors rendering.
Example
import * as React from 'react';
import { FieldTemplateProps } from 'react-jsonschema-form';
import { FormContext } from 'react-apollo-form';
export const FieldTemplate = (props: FieldTemplateProps) => {
const { classNames, help, description, errors, children, rawErrors } = props;
const showErrorsInline = (props.formContext as FormContext).showErrorsInline;
return (
<div className={classNames}>
<div>
{description}
{children}
{help}
{
errors && showErrorsInline && (
<div className="errors">
{errors}
</div>
)
}
</div>
</div>
);
};