UseModalForm

use useModalForm for both created and update

2 Replies

kapa.ai•14mo ago

Hi @parothia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useModalForm hook in Refine allows you to manage a form within a modal. It provides some useful methods to handle the form modal. This hook can be used for both creating and updating records. Here is an example of how to use useModalForm for creating a record:

import React from "react";  
import { List, useModalForm, useTable } from "@refinedev/antd";  
import { Form, Input, Modal, Select, Table } from "antd";  

const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost>();  
 const {  
 modalProps: createModalProps,  
 formProps: createFormProps,  
 show: createModalShow,  
 } = useModalForm<IPost>({  
 action: "create",  
 });  

 return (  
 <>  
 <List  
 createButtonProps={{  
 onClick: () => {  
 createModalShow();  
 },  
 }}  
 >  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="status" title="Status" />  
 </Table>  
 </List>  
 <Modal {...createModalProps}>  
 <Form {...createFormProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Status"  
 name="status"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Select  
 options={[  
 {  
 label: "Published",  
 value: "published",  
 },  
 {  
 label: "Draft",  
 value: "draft",  
 },  
 {  
 label: "Rejected",  
 value: "rejected",  
 },  
 ]}  
 />  
 </Form.Item>  
 </Form>  
 </Modal>  
 </>  
 );  
};  

interface IPost {  
 id: number;  
 title: string;  
 status: "published" | "draft" | "rejected";  
}

import React from "react";  
import { List, useModalForm, useTable } from "@refinedev/antd";  
import { Form, Input, Modal, Select, Table } from "antd";  

const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost>();  
 const {  
 modalProps: createModalProps,  
 formProps: createFormProps,  
 show: createModalShow,  
 } = useModalForm<IPost>({  
 action: "create",  
 });  

 return (  
 <>  
 <List  
 createButtonProps={{  
 onClick: () => {  
 createModalShow();  
 },  
 }}  
 >  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column dataIndex="status" title="Status" />  
 </Table>  
 </List>  
 <Modal {...createModalProps}>  
 <Form {...createFormProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Status"  
 name="status"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Select  
 options={[  
 {  
 label: "Published",  
 value: "published",  
 },  
 {  
 label: "Draft",  
 value: "draft",  
 },  
 {  
 label: "Rejected",  
 value: "rejected",  
 },  
 ]}  
 />  
 </Form.Item>  
 </Form>  
 </Modal>  
 </>  
 );  
};  

interface IPost {  
 id: number;  
 title: string;  
 status: "published" | "draft" | "rejected";  
}

In this example, useModalForm is used with the action "create". You can change the action to "edit" or "clone" to use the hook for updating or cloning a record. For more information, you can refer to the Refine useModalForm hook documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

UseModalForm

Did you find this page helpful?