ambitious-aqua•14mo ago

useModalForm 3.x.x add a value before server

const { modalProps: createModalProps, formProps: createFormProps, show: createModalShow, } = useModalForm<IManualAttendance>({ action: 'create', resource: 'registers/manual-attendance', redirect: false, autoSubmitClose: true, onMutationSuccess: (d) => { fetchAttendanceTable(currentDate); }, }); how do i add a value before the form sends on 3.x.x

2 Replies

kapa.ai•14mo ago

Hi @royercross. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine 3.x.x, you can modify the form data before it is sent to the API by using the onFinish function in your form. Here's an example of how you can do this:

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

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

In this example, the onFinish function is used to combine the name and surname fields into a fullName field before the form data is submitted. For more information, you can refer to the useForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/). Please note that the code you provided seems to be using the useModalForm hook, which is not covered in the provided extracts. The example I provided uses the useForm hook. The approach might be slightly different with useModalForm, but the general idea of using the onFinish function to modify the form data should still apply. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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