wise-white•10mo ago

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

kapa.ai•10mo ago

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:

const {  
 saveButtonProps,  
 handleSubmit,  
 register,  
 modal,  
 refineCore: { onFinish, formLoading },  
} = useModalForm();  
  
return (  
 <>  
 <button onClick={show}>Show Modal</button>  
 <Modal {...modal}>  
 <form onSubmit={handleSubmit(onFinish)}>  
 <div>  
 <label>Title: </label>  
 <input {...register("title")} />  
 </div>  
 <div>  
 <button  
 type="submit"  
 disabled={saveButtonProps.disabled}  
 onClick={(e) => {  
 // -- your custom logic  
 saveButtonProps.onClick(e);  
 }}  
 >  
 Save  
 </button>  
 </div>  
 </form>  
 </Modal>  
 </>  
);

const {  
 saveButtonProps,  
 handleSubmit,  
 register,  
 modal,  
 refineCore: { onFinish, formLoading },  
} = useModalForm();  
  
return (  
 <>  
 <button onClick={show}>Show Modal</button>  
 <Modal {...modal}>  
 <form onSubmit={handleSubmit(onFinish)}>  
 <div>  
 <label>Title: </label>  
 <input {...register("title")} />  
 </div>  
 <div>  
 <button  
 type="submit"  
 disabled={saveButtonProps.disabled}  
 onClick={(e) => {  
 // -- your custom logic  
 saveButtonProps.onClick(e);  
 }}  
 >  
 Save  
 </button>  
 </div>  
 </form>  
 </Modal>  
 </>  
);

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

kapa.ai•10mo ago

<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•10mo ago

@kapa.ai how to stop modal closing onFinish in refine antd useModalForm

kapa.ai•10mo ago

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:

const { close, modalProps, formProps, onFinish } = useModalForm();  
  
const onFinishHandler = (values) => {  
 onFinish(values);  
 // Do not call close() here  
};  
  
return (  
 <Modal {...modalProps}>  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Modal>  
);

const { close, modalProps, formProps, onFinish } = useModalForm();  
  
const onFinishHandler = (values) => {  
 onFinish(values);  
 // Do not call close() here  
};  
  
return (  
 <Modal {...modalProps}>  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Modal>  
);

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

kapa.ai•10mo ago

<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•10mo ago

@kapa.ai i want the form is cleared if the form is submited successfully

kapa.ai•10mo ago

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:

const { formProps, reset } = useForm({
  onSuccess: () => {
    reset();
  },
});

const { formProps, reset } = useForm({
  onSuccess: () => {
    reset();
  },
});

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

kapa.ai•10mo ago

<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•10mo ago

@kapa.ai no, im using useModalForm

kapa.ai•10mo ago

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:

const { formProps, form } = useModalForm({
  action: "create",
  resource: "posts",
  mutationMode: "pessimistic",
  onSuccess: () => {
    form.resetFields();
  },
});

const { formProps, form } = useModalForm({
  action: "create",
  resource: "posts",
  mutationMode: "pessimistic",
  onSuccess: () => {
    form.resetFields();
  },
});

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

kapa.ai•10mo ago

<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below