Populate selectfield from another form's result
Hey guys, been using v4 for a while now and it's great so far. I have a question in something I want to implent in a form and I'll do my best to explain it.
I have resource1 and resource2, and in the create form for resource1 there is a selectfield to select resource 2. Next to the selectfield is a create button that opens a modal to create a record for resource2, and when that create form is submitted I want to automatically populate the selectfield with the record that is just created.
Would appreciate any help on how to best implement this
7 Replies
Hey @ahnaf1022! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
To achieve this, you can use the
useSelect
hook provided by refine to fetch the data from resource2
and populate the select field in the create form for resource1
. You can also use the useModalForm
hook to create a modal for adding a new record to resource2
. After submitting the create form for resource2
, you can update the options in the select field to include the newly created record.
Here's a basic outline of how you can implement this:
1. Use the useSelect
hook to fetch data from resource2
and populate the select field in the create form for resource1
:
2. Use the useModalForm
hook to create a modal for adding a new record to resource2
:
3. Add a create button next to the select field that opens the modal:
4. In the create form for resource2
, after submitting the form, update the options in the select field to include the newly created record. You can achieve this by using the onSuccess
callback of the useCreate
hook in the create form for resource2
:
For more information on the useSelect
hook, refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). For more information on the useModalForm
hook, refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm).
----------------------<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
helpful-purpleOP•2y ago
can I populate the selectfield from the record instead of just adding the record to the options?
Also, amazing how the ai almost completely understood my very confusing question
adverse-sapphire•2y ago
Hey @ahnaf1022,
There are too many ways to do it. You can use “defaultValue” prop of <Select> component or you can use “form.setFieldValue” method of “useForm” return type to set value of your form. However, you don’t need to update your “useSelect” options. Because when you create a record, “useForm” automatically invalidate the related resource queries.
If you create a sandbox, we can review and help with pleasure.
helpful-purpleOP•2y ago
Okay so I can use form.setFieldValue in the onSuccess callback?
adverse-sapphire•2y ago
you can 🤙🏻
helpful-purpleOP•2y ago
Thanks a lot! I will try that