Form: Transform data before submit

Is it possible to transform data before submit with a useForm + antd ?

5 Replies

Hi @Nicolas Bourdin. 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 transform or modify the form data before submitting it to the API using useForm with Ant Design in Refine. You can achieve this by creating a custom onFinish function where you modify the form data as needed. Here is an example:

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>  
 );  
};

In this example, the values received from the user in two separate inputs, name and surname, are combined and sent to the API as fullName 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 :speech_balloon: ----------------------

kapa.ai•7mo ago

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

sunny-green•7mo ago

give me an example which transform a boolean in a nullable (if not checked) or date now (if checked) before submit @kapa.ai 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•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- 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:

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>  
 );  
};

In this example, the handleOnFinish 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 onFinish function from useForm, which submits the form data to the API. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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