Modifying register values in UseModalFormReturnType
Is it possible to modify values that will be registered in custom modal form with type UseModalFormReturnType. I have some separate logic that can't be returned directly from FormControl.
23 Replies
Hi @Tacho. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to modify the values that will be registered in a custom modal form with type
UseModalFormReturnType
. You can do this by using the transformValues
function in the useModalForm
hook. This function allows you to modify the form data before it is submitted to the API.
Here is an example of how you can do this:
In this example, the transformValues
function is used to combine the name
and surname
values into a single fullName
value before it is submitted to the API.
You can replace the transformValues
function with your own logic to modify the form data as needed.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•10mo ago
@kapa.ai Is it possible to pass additional values on onFinish or handleSubmit?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, it is possible to pass additional values on
onFinish
or handleSubmit
. The onFinish
hook in Refine allows you to override the save
button's default configuration and define what’s sent to the server. The hook accepts an object with properties of each record on the API, to which you can pass custom values.
Here is an example of how you can use the onFinish
hook:
To use this hook, first, destructure it and the handleSubmit
hook from useForm
.
In the onFinish
function, you can pass an object with the properties of each record on the API. You can add additional properties to this object as needed.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form#onfinish).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•10mo ago
@kapa.ai How would I include all values from fields end extend onFinish with additional values from my logic?
Let me check the knowledge base for you. One moment! :books:
----------------------
You can include all values from fields and extend
onFinish
with additional values from your logic by defining a custom onFinish
function. This function will receive the form values as its argument, which you can then modify as needed before submitting.
Here's an example of how you can do this:
In this example, values
is an object containing all the form values. You can spread this object into a new object to include all the original form values, and then add your additional values to this new object.
Please note that you'll need to replace myMutationFunction
with the actual function you're using to submit the form data.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#onfinish-2).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•10mo ago
@kapa.ai And how would I do it inside modal?
Let me check the knowledge base for you. One moment! :books:
----------------------
You can modify the form values before submitting them in a modal by defining a custom
onFinish
function inside your CreateOrder
component. This function will receive the form values as its argument, which you can then modify as needed before submitting.
Here's an example of how you can do this:
In this example, values
is an object containing all the form values. You can spread this object into a new object to include all the original form values, and then add your additional values to this new object.
The onFinish
function is then called with the extended values when the form is submitted.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•10mo ago
@kapa.ai Could I modify it inside of handleSubmit instead of onFinish?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can modify the form data inside of
handleSubmit
instead of onFinish
. The handleSubmit
function from react-hook-form
takes an onSubmit
callback function as its argument, which is called with the form data when the form is submitted.
Here's an example of how you can do this:
In this example, handleSubmit
is called with the onSubmit
function, which modifies the form values before calling onFinish
.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•10mo ago
@kapa.ai Can I call my custom onSubmit at Create SaveButton props and how?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can call your custom
onSubmit
function at the Create
component's SaveButton
props. You can do this by defining a custom onClick
handler for the SaveButton
that calls handleSubmit
with your onSubmit
function.
Here's an example of how you can do this:
In this example, handleSubmit
is called with the onSubmit
function inside the onClick
handler for the SaveButton
. This will modify the form values before they are submitted when the SaveButton
is clicked.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create#savebuttonprops).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-whiteOP•10mo ago
@kapa.ai I tried it like this but it doesn't work, can you help?
Let me check the knowledge base for you. One moment! :books:
Sorry @Tacho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
wise-whiteOP•10mo ago
@kapa.ai I tried it like this but it doesn't work, can you help?
Let me check the knowledge base for you. One moment! :books:
Sorry @Tacho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
wise-whiteOP•10mo ago
@kapa.ai I tried it like this but it doesn't work, can you help?
Let me check the knowledge base for you. One moment! :books:
Sorry @Tacho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?