Error messages customisation

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
};

---

Error list

custom ErrorList Component

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)}
    />
);

---

Inline Errors

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>
    );
};