equal-aqua•8mo ago

exclude some fields from being sent

<Create saveButtonProps={saveButtonProps}> <Form {...formProps} layout="vertical"> <Form.Item name="email" label={"Email"} rules={[ { required: true }, { type: "email", message: "Invalid email address", }, ]} > <Input size="large" placeholder={"Email"} /> </Form.Item> <Form.Item name="password" label={"Password"} rules={[{ required: true }]} hasFeedback > <Input type="password" placeholder="●●●●●●●●" size="large" /> </Form.Item> {/* <Form.Item name="confirmPassword" label={"Confirm Password"} hasFeedback dependencies={["password"]} rules={[ { required: true }, ({ getFieldValue }) => ({ validator(_, value) { if (!value || getFieldValue("password") === value) { return Promise.resolve(); } return Promise.reject( new Error("Confirm passwords do not match!") ); }, }), ]} > <Input type="password" placeholder="●●●●●●●●" size="large" /> </Form.Item> */} </Form> </Create> please tell me how to exclude confirm passwords from being sent to bakcend

5 Replies

kapa.ai•8mo ago

Hi @M Farhan Zachary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In the provided code, the "confirmPassword" field is already commented out, which means it won't be included in the form data and won't be sent to the backend. If you want to exclude any other fields from being sent to the backend, you can simply not include them in the form or comment them out like the "confirmPassword" field. However, if you want to keep the field in the form for user interaction but don't want to send it to the backend, you can modify the data before submission. You can use the onFinish function from the useForm hook to modify the form data before it's sent to the backend. Here's an example of how you can do this:

export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm<FormValues, HttpError, FormValues>();  
  
 const handleSubmitPostCreate = (values: FormValues) => {  
 const { name, surname, ...otherValues } = values;  
 const fullName = `${name} ${surname}`;  
 onFinish({  
 ...otherValues,  
 fullName,  
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(handleSubmitPostCreate)}>  
 {/* form fields here */}
 </form>  
 );  
};

export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm<FormValues, HttpError, FormValues>();  
  
 const handleSubmitPostCreate = (values: FormValues) => {  
 const { name, surname, ...otherValues } = values;  
 const fullName = `${name} ${surname}`;  
 onFinish({  
 ...otherValues,  
 fullName,  
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(handleSubmitPostCreate)}>  
 {/* form fields here */}
 </form>  
 );  
};

In this example, the handleSubmitPostCreate function takes the form values, destructures the values you want to exclude (in this case "name" and "surname"), and then sends the rest of the values to the backend. For more information, you can refer to the Refine documentation on how to change form data before submitting it to the API (https://refine.dev/docs/guides-concepts/faq#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•8mo ago

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

equal-aqua•8mo ago

how to integrate this with <Create/> component from antd that have saveButtonProps @kapa.ai

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To integrate this with the <Create/> component from Ant Design that has saveButtonProps, you can use the onFinish function from the useForm hook to modify the form data before it's sent to the backend. However, you need to pass this modified onFinish function to the saveButtonProps of the <Create/> component. Here's an example of how you can do this:

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

const PostCreate: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  

 const handleSubmitPostCreate = (values: IPost) => {  
   const { confirmPassword, ...otherValues } = values;  
   saveButtonProps.onFinish(otherValues);  
 };  

 return (  
   <Create saveButtonProps={{...saveButtonProps, onFinish: handleSubmitPostCreate}}>  
     <Form {...formProps} layout="vertical">  
       {/* form fields here */}
     </Form>  
   </Create>  
 );  
};  

interface IPost {  
 id: number;  
 title: string;  
 confirmPassword: string;
}

import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

const PostCreate: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  

 const handleSubmitPostCreate = (values: IPost) => {  
   const { confirmPassword, ...otherValues } = values;  
   saveButtonProps.onFinish(otherValues);  
 };  

 return (  
   <Create saveButtonProps={{...saveButtonProps, onFinish: handleSubmitPostCreate}}>  
     <Form {...formProps} layout="vertical">  
       {/* form fields here */}
     </Form>  
   </Create>  
 );  
};  

interface IPost {  
 id: number;  
 title: string;  
 confirmPassword: string;
}

In this example, the handleSubmitPostCreate function takes the form values, destructures the values you want to exclude (in this case "confirmPassword"), and then sends the rest of the values to the backend using the onFinish function from saveButtonProps. Please note that this is a hypothetical example and you may need to adjust it according to your actual form structure and data. For more information, you can refer to the Refine documentation on how to change form data before submitting it to the API (https://refine.dev/docs/guides-concepts/faq#how-can-i-change-the-form-data-before-submitting-it-to-the-api) and the Refine documentation on the <Create/> component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create#savebuttonprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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