how to manipulate data for stepForm ant d

unexpected-ivory · 2024-03-01T12:29:36.592Z

how to manipulate data for stepForm ant d before calling api

K

kapa.ai•3/1/24, 12:29 PM

Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•3/1/24, 12:29 PM

----------------------
To manipulate data in a

useStepsForm

useStepsForm

with Ant Design before submitting it to the API in a Refine application, you can override the

submit

submit

submit

submit function within the

useStepsForm

useStepsForm

hook. This allows you to modify the form data as needed. For example, if you need to combine the values of two separate inputs,

name

name

and

surname

surname

surname

surname, into a single

fullName

fullName

fullName

fullName field before sending it to the API, you can do so as follows:

import { useStepsForm } from "@refinedev/antd";  
// ...  
const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } = useStepsForm<IPost>({  
 submit: (values) => {  
 const data = {  
 fullName: `${values.name} ${values.surname}`,  
 age: values.age,  
 city: values.city,  
 };  
 onFinish(data as any);  
 },  
});  
// ...

import { useStepsForm } from "@refinedev/antd";  
// ...  
const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } = useStepsForm<IPost>({  
 submit: (values) => {  
 const data = {  
 fullName: `${values.name} ${values.surname}`,  
 age: values.age,  
 city: values.city,  
 };  
 onFinish(data as any);  
 },  
});  
// ...

import { useStepsForm } from "@refinedev/antd";  
// ...  
const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } = useStepsForm<IPost>({  
 submit: (values) => {  
 const data = {  
 fullName: `${values.name} ${values.surname}`,  
 age: values.age,  
 city: values.city,  
 };  
 onFinish(data as any);  
 },  
});  
// ...

import { useStepsForm } from "@refinedev/antd";  
// ...  
const { current, gotoStep, stepsProps, formProps, saveButtonProps, onFinish } = useStepsForm<IPost>({  
 submit: (values) => {  
 const data = {  
 fullName: `${values.name} ${values.surname}`,  
 age: values.age,  
 city: values.city,  
 };  
 onFinish(data as any);  
 },  
});  
// ...

In this example, the

submit

submit

submit

submit function is overridden to combine

name

name

and

surname

surname

surname

surname into

fullName

fullName

fullName

fullName, along with other fields like

age

age

age

age and

city

city

, before calling the

onFinish

onFinish

onFinish

onFinish method with the modified data.

For more detailed information, you can refer to the documentation on how to change the form data before submitting it to the API using

useStepsForm

useStepsForm

in Refine with Ant Design: useStepsForm - How can I change the form data before submitting it to the API? (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-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

----------------------

K

kapa.ai•3/1/24, 12:30 PM

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