custom

i am use step form, why to custom payload before sending to endpoint ?

2 Replies

Hi @angga30prabu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In some cases, you might need to modify the form data before it is sent to the API. This could be due to the specific requirements of your backend API or to ensure the data is in the correct format. For example, if you have two separate inputs for name and surname, but your API expects a single fullName field, you would need to combine these two fields before sending the data. Here's how you can do this with useStepsForm in refine: For Mantine:

import { useStepsForm } from "@refinedev/mantine";  
import React from "react";  
  
const UserCreate: React.FC = () => {  
 const {  
 saveButtonProps,  
 getInputProps,  
 values,  
 steps: { currentStep, gotoStep },  
 } = useStepsForm({  
 refineCoreProps: { action: "create" },  
 initialValues: {  
 name: "",  
 surname: "",  
 },  
 transformValues: (values) => ({  
 fullName: `${values.name} ${values.surname}`,  
 }),  
 });  
  
 // ...  
};

import { useStepsForm } from "@refinedev/mantine";  
import React from "react";  
  
const UserCreate: React.FC = () => {  
 const {  
 saveButtonProps,  
 getInputProps,  
 values,  
 steps: { currentStep, gotoStep },  
 } = useStepsForm({  
 refineCoreProps: { action: "create" },  
 initialValues: {  
 name: "",  
 surname: "",  
 },  
 transformValues: (values) => ({  
 fullName: `${values.name} ${values.surname}`,  
 }),  
 });  
  
 // ...  
};

(Source: Refine Mantine useStepsForm Documentation (https://refine.dev/docs/api-reference/mantine/hooks/form/useStepsForm/)) For Ant Design:

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

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

(Source: Refine Antd useStepsForm Documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useStepsForm/)) In both examples, the fullName field is created by combining the name and surname fields from the form data. This modified data is then sent to the API when the form is submitted. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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