harsh-harlequin
harsh-harlequin6mo ago

UseModalForm

use useModalForm for both created and update
2 Replies
kapa.ai
kapa.ai6mo 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
kapa.ai6mo ago
<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below