Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138163

How do I make my custom toolbar button use the form's validation function in react-admin?

$
0
0

I created a custom Toolbar with a custom toolbar button. That custom button should act like the standard SaveButton but should do extra stuff after submitting the form. Submitting the form should only be possible if the validation passes. If not the fields not passing should be marked.

In short, my custom button should act like the built-in SaveButton but let me do some extra stuff after submit.

Unfortunately, the validation function of the form is not called and according to the invalid flag, the form is always invalid. What am I doing wrong?

This is how I implemented the custom button:

const ActionButton = ({ handleSubmitWithRedirect, ...props }) => {
    const form = useForm();
    var formdata = form.getState().values;

    const handleClick = useCallback(() => {
        // Validation function of the form is NOT called, the form is always invalid... why?
        if (!props.invalid) {
            doSomeExtraStuff();
            handleSubmitWithRedirect('list');
        } else alert("Invalid!");
    }, [formdata, form]);

    return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
};

My Toolbar function is like:

export const MyCustomToolbar = props => (
    <Toolbar {...props} >
        <SaveButton
            label="Save"
            redirect="list"
            submitOnEnter={true}
            variant="outline"
        />

        <ActionButton
            label="Save and do extra stuff"
            redirect="edit"
            submitOnEnter={false}
            variant="text"
        />

    </Toolbar>
);

Viewing all articles
Browse latest Browse all 138163

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>