- Notifications
You must be signed in to change notification settings - Fork15
Error messages customisation
Charly POLY edited this pageJun 8, 2018 ·3 revisions
By default,<ApolloForm> do not display errors.
To enable it, you should provide some options toui prop.
There is 2 errors modeslist orinline.
Theui have 3 properties specific to error management:
typeApolloFormUi={showErrorsList?:boolean;// show error list at the top of the formshowErrorsInline?:boolean;// show error at field levelerrorListComponent?:ErrorListComponent;// provide a custom component for error list};
The component will receiveErrorListComponentProps:
typeErrorListComponentProps={errors:ReactJsonschemaFormError[];errorSchema:object;schema:object;uiSchema:UiSchema;formContext:object;}
Example ofErrorList component
import*asReactfrom'react';import{ErrorListComponent}from'react-apollo-form';import{Message}from'semantic-ui-react';constErrorList:ErrorListComponent=p=>(<Messageerror={true}visible={true}header="There was some errors"list={p.errors.map(e=>e.message)}/>);
When passingui.showErrorsInline attrue, ashowErrorsInline property will be accessible fromformContext.
ThisformContext is accessible in allfields,templates andwidgets components, so you can implement yourself the errors rendering.
Example
import*asReactfrom'react';import{FieldTemplateProps}from'react-jsonschema-form';import{FormContext}from'react-apollo-form';exportconstFieldTemplate=(props:FieldTemplateProps)=>{const{ classNames, help, description, errors, children, rawErrors}=props;constshowErrorsInline=(props.formContextasFormContext).showErrorsInline;return(<divclassName={classNames}><div>{description}{children}{help}{errors&&showErrorsInline&&(<divclassName="errors">{errors}</div>)}</div></div>);};