CODEWITHSUNDEEP
reactjsformsvalidationreact-adminadmin-on-rest
Christiaan Westerbeek
Christiaan Westerbeek

Reputation: 11157

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

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

Upvotes: 5

Views: 7169

Answers (3)

Mesut Uluag
Mesut Uluag

Reputation: 21

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>

Upvotes: 0

Christiaan Westerbeek
Christiaan Westerbeek

Reputation: 11157

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;

Upvotes: 5

Gildas Garcia
Gildas Garcia

Reputation: 7066

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

Upvotes: 5

Related Questions