saveButtonProps method http what is it

3 Replies

Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- saveButtonProps is not a method but a property returned by the useForm hook in the Refine framework. It contains all the properties needed by the "submit" button within a form, such as disabled, onClick, etc. When saveButtonProps.onClick is called, it triggers the handleSubmit function with onFinish. You can manually pass these properties to your custom button. This property is used to handle the submission functionality of the form via the save button. It is used in various components like <Create>, <Edit>, and <SaveButton> in different UI integrations like Ant Design, Material UI, Mantine, and Chakra UI. Here is an example of how it's used:

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
}

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
}

In this example, saveButtonProps is passed to the <Edit> component to handle the form submission. For more information, you can refer to the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#savebuttonprops). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

helpful-purple•9mo ago

what is the rest api call