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