How to use edit model form without id?
I have a requirement where I want to edit a data in a modal form but I don't want to call the api to fetch data. Because I already have the data from the list value. I want the value from the list to be default values in edit modal form.
13 Replies
Hi @Dipesh Bajgain. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the extracts, Refine's
useForm
hook with action: "edit"
requires an id
to determine the record to edit. By default, it uses the id
from the route and fetches the record data according to the id
with useOne
and returns the queryResult
for you to fill the form. After the form is submitted, it updates the record with useUpdate
.
However, if you already have the data from the list and you don't want to call the API to fetch data, you can set the initial values of the form fields using the initialValues
property of the useForm
hook. Here's an example:
In this example, replace "Your title here"
and "Your content here"
with your actual data. The getInputProps
function is used to bind the form fields to the form state.
Please note that this approach bypasses the automatic fetching of data by the useForm
hook and assumes that you are managing the data fetching yourself.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form#action).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
automatic-azureOP•11mo ago
@kapa.ai I am using
useModalForm
from antd.Let me check the knowledge base for you. One moment! :books:
----------------------
In the case of
useModalForm
from Ant Design, you can also set the initial values of the form fields using the initialValues
property. Here's an example:
In this example, replace "Your title here"
and "Your content here"
with your actual data. The formProps
are used to bind the form fields to the form state.
Please note that this approach bypasses the automatic fetching of data by the useModalForm
hook and assumes that you are managing the data fetching yourself.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
automatic-azureOP•11mo ago
@kapa.ai Object literal may only specify known properties, and 'initialValues' does not exist in type 'UseModalFormProps
Let me check the knowledge base for you. One moment! :books:
----------------------
I apologize for the confusion. The
initialValues
property is not available in the useModalForm
hook according to the provided extracts.
The useModalForm
hook in Refine does not directly support setting initial values. It is designed to work with the create
action and fetches data based on the id
provided in the route for edit
or clone
actions.
If you want to bypass the automatic data fetching and use your own data, you might need to manually manage the form state. You can use Ant Design's Form
component with its own initialValues
prop for this purpose.
Here's an example:
In this example, replace "Your title here"
and "Your content here"
with your actual data. The initialValues
prop of Ant Design's Form
component is used to set the initial form field values.
Please note that this approach bypasses the automatic fetching of data by the useModalForm
hook and assumes that you are managing the data fetching yourself.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
automatic-azureOP•11mo ago
@kapa.ai my initialvalues are dynamic so when the data are not present the form is mounted. So, the initialvalues are empty and when the initialvalues are loaded from the api the form is not updated.
Let me check the knowledge base for you. One moment! :books:
----------------------
In Ant Design's Form component, the
initialValues
prop only sets the initial values when the form is first rendered. If you want to update the form values after the form has been mounted, you can use the setFieldsValue
method from the form
instance.
Here's an example:
In this example, replace "Your title here"
and "Your content here"
with your actual data. The useEffect
hook is used to fetch the data from the API when the component is mounted. The setFieldsValue
method is then used to update the form values with the fetched data.
Please note that this approach bypasses the automatic fetching of data by the useModalForm
hook and assumes that you are managing the data fetching yourself.
For more information, you can refer to the Ant Design Form documentation (https://ant.design/components/form/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@494653850632978472> kapa.ai is still learning and improving, please let us know how it did by reacting below
tame-yellow•11mo ago
Hey @Dipesh Bajgain I think you can use
queryOptions.enabled: false
with your hook. That should disable fetching data, before rendering the modal. LMK if that helps!automatic-azureOP•11mo ago
Hey @Batu, Thanks for your response. I have used the model form for
create
so that I don't need to fetch the data and updated the initial values of form using useEffect
hook suggested by kappa.ai and is working fine for now.