save and continue
const {
modalProps: createModalProps,
formProps: createFormProps,
show: createModalShow,
} = useModalForm<IBrand>({
action: "create",
warnWhenUnsavedChanges: true,
});
const {
modalProps: editModalProps,
formProps: editFormProps,
show: editModalShow,
id: editId,
} = useModalForm<IBrand>({
action: "edit",
warnWhenUnsavedChanges: true,
});
im using modal to handle crud entity, how to controll save button, i want save and continue saving new one
11 Replies
Hi @tuanna_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To control the save button in your modal, you can use the
saveButtonProps
returned by the useModalForm
hook. This object contains all the props needed by the "submit" button within the modal, such as disabled
, loading
, etc. You can manually pass these props to your custom button.
Here's an example of how you can use saveButtonProps
:
In the above code, saveButtonProps.disabled
is used to control the disabled state of the button, and saveButtonProps.onClick(e)
is used to handle the click event of the button. You can add your custom logic in the onClick
handler.
For more information, refer to the useModalForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useModalForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-gold•11mo ago
@kapa.ai how to stop modal closing onFinish in refine antd useModalForm
Let me check the knowledge base for you. One moment! :books:
----------------------
To prevent the modal from closing after form submission, you can use the
close
function returned by the useModalForm
hook. This function is used to manually close the modal. If you don't call this function in your onFinish
handler, the modal will not close after form submission.
Here's an example:
In the above code, the onFinishHandler
function is passed to the onFinish
prop of the Form
component. This function is called when the form is successfully validated and submitted. The close
function is not called in onFinishHandler
, so the modal will not close after form submission.
For more information, refer to the useModalForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-gold•11mo ago
@kapa.ai i want the form is cleared if the form is submited successfully
Let me check the knowledge base for you. One moment! :books:
----------------------
To clear the form fields after a successful submission, you can use the
reset
function provided by the useForm
hook. You can call this reset
function in your onFinish
handler after the form is submitted successfully.
Here's an example:
In the above code, the reset
function is called in the onSuccess
callback of the useForm
hook. This will clear all the form fields after a successful form submission.
For more information, refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-gold•11mo ago
@kapa.ai no, im using useModalForm
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useModalForm
hook in Refine extends from the useForm
hook, which means you can use all the features of useForm
hook, including the reset
function to clear the form fields after a successful submission.
However, the reset
function is not directly exposed by the useModalForm
hook. To access it, you need to use the form
object returned by useModalForm
, which is an instance of Ant Design's FormInstance
. You can call its resetFields
method to clear the form fields.
Here's an example:
In the above code, the resetFields
method is called in the onSuccess
callback of the useModalForm
hook. This will clear all the form fields after a successful form submission.
For more information, refer to the useModalForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below