magic-amber•2y ago

editing usemodal form footer

i am having a custom button in antmodal footer footer={<Button >okk</Button>} if i click on this save functionality should occur how to do it?

4 Replies

Omer•2y ago

Hey @rehan1 👋 , You can use okButtonProps of modalProps.

const {
    modalProps,
  } = useModalForm({
    action: 'edit',
});

<Modal
    {...createModalProps}
    footer={
        <Button {...modalProps.okButtonProps}>Custom Button</Button>
    }
>

const {
    modalProps,
  } = useModalForm({
    action: 'edit',
});

<Modal
    {...createModalProps}
    footer={
        <Button {...modalProps.okButtonProps}>Custom Button</Button>
    }
>

magic-amber•2y ago

<Modal footer={ <Button {...modalProps.cancelButtonProps}>Custom Button</Button> } className="modal-create-appointment" {...modalProps}> modal not getting closed?

Omer•2y ago

https://stackblitz.com/edit/pankod-refine-3ebrsu?file=src%2Fpages%2Fposts%2Flist.tsx%3AL96 You can use close function of useModalForm

const {
    modalProps,
    close,
  } = useModalForm({
    action: 'edit',
});

<Button onClick={close}>Custom Close Button</Button>

const {
    modalProps,
    close,
  } = useModalForm({
    action: 'edit',
});

<Button onClick={close}>Custom Close Button</Button>

magic-amber•2y ago

thank you it worked