how can I show customized error messaged from server side validation in React Admin package?

Question

Is there any way to perform server side form validation using https://github.com/marmelab/react-admin package?

Here\'s the code for AdminCreate Component. It sends c

Answer 1

If you're using SimpleForm, you can use asyncValidate together with asyncBlurFields as suggested in a comment in issue 97. I didn't use SimpleForm, so this is all I can tell you about that.

I've used a simple form. And you can use server-side validation there as well. Here's how I've done it. A complete and working example.

import React from 'react';
import PropTypes from 'prop-types';
import { Field, propTypes, reduxForm, SubmissionError } from 'redux-form';
import { connect } from 'react-redux';
import compose from 'recompose/compose';
import { CardActions } from 'material-ui/Card';
import Button from 'material-ui/Button';
import TextField from 'material-ui/TextField';
import { CircularProgress } from 'material-ui/Progress';
import { CREATE, translate } from 'ra-core';
import { dataProvider } from '../../providers'; // <-- Make sure to import yours!

const renderInput = ({
    meta: { touched, error } = {},
    input: { ...inputProps },
    ...props
}) => (
    
);

/**
 * Inspired by
 * - https://redux-form.com/6.4.3/examples/submitvalidation/
 * - https://marmelab.com/react-admin/Actions.html#using-a-data-provider-instead-of-fetch
 */
const submit = data =>
    dataProvider(CREATE, 'things', { data: { ...data } }).catch(e => {
        const payLoadKeys = Object.keys(data);
        const errorKey = payLoadKeys.length === 1 ? payLoadKeys[0] : '_error';
        // Here I set the error either on the key by the name of the field
        // if there was just 1 field in the payload.
        // The `Field` with the same `name` in the `form` wil have
        // the `helperText` shown.
        // When multiple fields where present in the payload, the error  message is set on the _error key, making the general error visible.
        const errorObject = {
            [errorKey]: e.message,
        };
        throw new SubmissionError(errorObject);
    });

const MyForm = ({ isLoading, handleSubmit, error, translate }) => (
    

        

            

                
            
        
        
            
                {isLoading && }
                Signin
            
            {error && General error: {translate(error)}}
        
    
);
MyForm.propTypes = {
    ...propTypes,
    classes: PropTypes.object,
    redirectTo: PropTypes.string,
};

const mapStateToProps = state => ({ isLoading: state.admin.loading > 0 });

const enhance = compose(
    translate,
    connect(mapStateToProps),
    reduxForm({
        form: 'aFormName',
        validate: (values, props) => {
            const errors = {};
            const { translate } = props;
            if (!values.email)
                errors.email = translate('ra.validation.required');
            return errors;
        },
    })
);

export default enhance(MyForm);

If the code needs further explanation, drop a comment below and I'll try to elaborate.

I hoped to be able to do the action of the REST-request by dispatching an action with onSuccess and onFailure side effects as described here, but I couldn't get that to work together with SubmissionError.