How to disable the SaveButton when the SimpleForm is invalid in a react-admin app?

Question

In a react-admin SimpleForm component validation is working fine when I click the save button. The field that is required is highlighted and marked red when I click the save button.

I'd like to add a className to the SaveButton as long as the form is invalid. This way I can make it clear to the user that he's not done with the form yet and prevent the user from clicking it.

This is a simplified version of such a SimpleForm.

import {
    required,
    //...
} from 'react-admin';

const UserCreateToolbar = props =>
    <Toolbar {...props}>
        <SaveButton
            label="user.action.save_and_show"
            redirect="show"
            submitOnEnter={true}
        />
    </Toolbar>;

export const UserCreate = props =>
    <Create {...props}>
        <SimpleForm
            toolbar={<UserCreateToolbar />}
        >
            <TextInput source="name" validate={[required()]} />
        </SimpleForm>
    </Create>;

score 5 · Answer 1 · answered Jun 18 '18 at 15:05

You can create your own SaveButton component, connected to redux, which will get the validation status from the state (check the redux-form documentation) for the form which is always named record-form in react-admin.

Then, you can apply the disabled prop on the button and eventually tweak its styles

Christiaan Westerbeek · Accepted Answer · 2018-06-19T06:45:49.563

5

Here's my own SaveButton component I came up with. It's working for me. Thanks @Gildas for pointing me in the right direction.

import React from 'react';
import PropTypes from 'prop-types';
import { reduxForm } from 'redux-form';
import { SaveButton } from 'react-admin';

const SaveButtonAware = ({ invalid, ...rest }) => (
    <SaveButton disabled={invalid} {...rest} />
);

SaveButtonAware.propTypes = {
    invalid: PropTypes.bool,
};

export default reduxForm({
    form: 'record-form',
})(SaveButtonAware);

Update. Apparently, this is working too. Not sure why.

import React from 'react';
import PropTypes from 'prop-types';
import { SaveButton } from 'react-admin';

const SaveButtonAware = ({ invalid, ...rest }) => (
    <SaveButton disabled={invalid} {...rest} />
);

SaveButtonAware.propTypes = {
    invalid: PropTypes.bool,
};

export default SaveButtonAware;

edited Jun 19 '18 at 06:45

answered Jun 18 '18 at 18:23

Christiaan Westerbeek

10,619
13
64
89

2

That's because we do pass `invalid` in props to the `toolbar` and it should pass it to it's buttons. I forgot that... This is the right answer. Thx ! – Gildas Garcia Jun 23 '18 at 09:12
what about the pristine prop @GildasGarcia ? i.e. to keep the save button disabled when the form hasn't been changed (and also when the form data isn't valid) – Andy Lorenz Dec 09 '20 at 13:19
Yes, get the form status from the `useForm` hook provided by reacts finals form. We passed some of it before hooks were available but this will be the standard way soon – Gildas Garcia Dec 09 '20 at 18:32

score 0 · Answer 3 · answered Oct 03 '21 at 09:43

You should first create a customized toolbar and set Save button's disabled element to Toolbars invalid state, as shown below. ( Toolbar always have the state of form)

import * as React from "react";
import {
  Toolbar,
  SaveButton
} from 'react-admin';

const CustomToolbar = (props) => (
  <Toolbar {...props}>
    <SaveButton disabled={props.invalid}/>
  </Toolbar>
);

export default CustomToolbar;

Then use this customized toolbar in your form like shown below:

<SimpleForm redirect="list" toolbar={<CustomToolbar/>}>
    {your form elements}
</SimpleForm>

How to disable the SaveButton when the SimpleForm is invalid in a react-admin app?

3 Answers3