Form: Transform data before submit - Refine

kapa.ai

K

kapa.ai•1/16/24, 2:19 PM

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

kapa.ai

K

kapa.ai•1/16/24, 2:20 PM

----------------------
Yes, it is possible to transform or modify the form data before submitting it to the API using

useForm

useForm

with Ant Design in Refine. You can achieve this by creating a custom function where you modify the form data as needed. Here is an example:

In this example, the values received from the user in two separate inputs,

name

name

and , are combined and sent to the API as source (https://refine.dev/docs/ui-integrations/ant-design/hooks/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

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

kapa.ai

K

kapa.ai•1/16/24, 2:20 PM

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

colossal-harlequin

C

colossal-harlequinOP•1/16/24, 2:31 PM

give me an example which transform a boolean in a nullable (if not checked) or date now (if checked) before submit @kapa.ai

colossal-harlequin

C

colossal-harlequinOP•1/16/24, 2:32 PM

give me an example which transform a boolean in a nullable (if not checked) or date now (if checked) before submit @kapa.ai

kapa.ai

K

kapa.ai•1/16/24, 2:32 PM

Let me check the knowledge base for you. One moment!

kapa.ai

K

kapa.ai•1/16/24, 2:32 PM

----------------------
Sure, here is an example of how you can transform a boolean value into a nullable (if not checked) or the current date (if checked) before submitting the form:

In this example, the function checks if the checkbox is checked. If it is, it sets the value to the current date. If it's not checked, it sets the value to null. This transformed value is then passed to the function from

useForm

useForm

, which submits the form data to the API.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

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

kapa.ai

K

kapa.ai•1/16/24, 2:32 PM

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

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  
  
export const UserCreate: React.FC = () => {  
 const { formProps, saveButtonProps, onFinish } = useForm();  
  
 const handleOnFinish = (values) => {  
 onFinish({  
 fullName: `${values.name} ${values.surname}`,  
 });  
 };  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
 <Form.Item label="Name" name="name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Surname" name="surname">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Create>  
 );  
};

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
import React from "react";  
  
export const UserCreate: React.FC = () => {  
 const { formProps, saveButtonProps, onFinish } = useForm();  
  
 const handleOnFinish = (values) => {  
 onFinish({  
 fullName: `${values.name} ${values.surname}`,  
 });  
 };  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
 <Form.Item label="Name" name="name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Surname" name="surname">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Create>  
 );  
};

import { Create, useForm } from "@refinedev/antd";  
import { Form, Checkbox } from "antd";  
import React from "react";  

export const UserCreate: React.FC = () => {  
 const { formProps, saveButtonProps, onFinish } = useForm();  

 const handleOnFinish = (values) => {  
   const transformedValue = values.checkbox ? new Date() : null;
   onFinish({  
     checkbox: transformedValue,  
   });  
 };  

 return (  
   <Create saveButtonProps={saveButtonProps}>  
     <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
       <Form.Item label="Checkbox" name="checkbox" valuePropName="checked">  
         <Checkbox />  
       </Form.Item>  
     </Form>  
   </Create>  
 );  
};

import { Create, useForm } from "@refinedev/antd";  
import { Form, Checkbox } from "antd";  
import React from "react";  

export const UserCreate: React.FC = () => {  
 const { formProps, saveButtonProps, onFinish } = useForm();  

 const handleOnFinish = (values) => {  
   const transformedValue = values.checkbox ? new Date() : null;
   onFinish({  
     checkbox: transformedValue,  
   });  
 };  

 return (  
   <Create saveButtonProps={saveButtonProps}>  
     <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
       <Form.Item label="Checkbox" name="checkbox" valuePropName="checked">  
         <Checkbox />  
       </Form.Item>  
     </Form>  
   </Create>  
 );  
};