Form inside a modal

put a form inside modal and submit the post api

15 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: ---------------------- You can use the useModalForm hook provided by Refine to manage a form inside a modal component. This hook returns Ant Design Form and Modal props which you can use to create and manage your form within a modal. Here is an example of how you can use it:

import { Modal, useModalForm } from "@refinedev/antd";  
import { Form, Input, Button } from "antd";  
import React from "react";  

export const UserCreate: React.FC = () => {  
 const { formProps, modalProps, submit } = useModalForm({  
 action: "create",  
 });  

 return (  
 <Modal {...modalProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Button key="submit" type="primary" onClick={submit}>  
 Submit  
 </Button>
 </Form>  
 </Modal>  
 );  
};

import { Modal, useModalForm } from "@refinedev/antd";  
import { Form, Input, Button } from "antd";  
import React from "react";  

export const UserCreate: React.FC = () => {  
 const { formProps, modalProps, submit } = useModalForm({  
 action: "create",  
 });  

 return (  
 <Modal {...modalProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Button key="submit" type="primary" onClick={submit}>  
 Submit  
 </Button>
 </Form>  
 </Modal>  
 );  
};

In this example, useModalForm is used to create a form inside a modal. The formProps are passed to the Ant Design <Form /> component and modalProps are passed to the <Modal /> component. The submit function is used to manually submit the form. You can find more information about useModalForm in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/). ---------------------- 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

continuing-cyanOP•14mo ago

pass a string prop to modal @kapa.ai how to know from which action the modal was called if it called from two places

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books:

continuing-cyanOP•14mo ago

@kapa.ai if UserCreate is called from two different places..so pass the param and print in Form

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can pass a parameter to the UserCreate component and use it inside the form. Here's an example:

import { Modal, useModalForm } from "@refinedev/antd";  
import { Form, Input, Button } from "antd";  
import React from "react";  

export const UserCreate: React.FC<{trigger: string}> = ({ trigger }) => {  
 const { formProps, modalProps, submit } = useModalForm({  
 action: "create",  
 });  

 return (  
 <Modal {...modalProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Form.Item>
 <p>Triggered by: {trigger}</p>
 </Form.Item>
 <Button key="submit" type="primary" onClick={submit}>  
 Submit  
 </Button>
 </Form>  
 </Modal>  
 );  
};

import { Modal, useModalForm } from "@refinedev/antd";  
import { Form, Input, Button } from "antd";  
import React from "react";  

export const UserCreate: React.FC<{trigger: string}> = ({ trigger }) => {  
 const { formProps, modalProps, submit } = useModalForm({  
 action: "create",  
 });  

 return (  
 <Modal {...modalProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Form.Item>
 <p>Triggered by: {trigger}</p>
 </Form.Item>
 <Button key="submit" type="primary" onClick={submit}>  
 Submit  
 </Button>
 </Form>  
 </Modal>  
 );  
};

In this example, a trigger prop is passed to the UserCreate component. This prop is then used inside the form to display the action that triggered the modal. You can call the UserCreate component from different places like this:

<UserCreate trigger="action1" />
<UserCreate trigger="action2" />

<UserCreate trigger="action1" />
<UserCreate trigger="action2" />

Please note that this is a general approach and you might need to adjust it based on your specific use case. ---------------------- 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

continuing-cyanOP•14mo ago

@kapa.ai use the same UserCreate component for edit and prefil the values in form if it is edit

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can use the useForm hook provided by Refine to handle both create and edit actions. The useForm hook can infer the action from the route by default, but you can also override it by passing the action prop. Here's an example of how you can use it:

import React from "react";  
import { useForm } from "@refinedev/react-hook-form";  

export const UserCreateOrEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  

 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <label>Title: </label>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <br />  
 <label>Status: </label>  
 <select {...register("status")}>  
 <option value="published">published</option>  
 <option value="draft">draft</option>  
 <option value="rejected">rejected</option>  
 </select>  
 <br />  
 <label>Content: </label>  
 <br />  
 <textarea {...register("content", { required: true })} rows={10} cols={50} />  
 {errors.content && <span>This field is required</span>}  
 <br />  
 <br />  
 <input type="submit" disabled={formLoading} value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

import React from "react";  
import { useForm } from "@refinedev/react-hook-form";  

export const UserCreateOrEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  

 return (  
 <form onSubmit={handleSubmit(onFinish)}>  
 <label>Title: </label>  
 <input {...register("title", { required: true })} />  
 {errors.title && <span>This field is required</span>}  
 <br />  
 <label>Status: </label>  
 <select {...register("status")}>  
 <option value="published">published</option>  
 <option value="draft">draft</option>  
 <option value="rejected">rejected</option>  
 </select>  
 <br />  
 <label>Content: </label>  
 <br />  
 <textarea {...register("content", { required: true })} rows={10} cols={50} />  
 {errors.content && <span>This field is required</span>}  
 <br />  
 <br />  
 <input type="submit" disabled={formLoading} value="Submit" />  
 {formLoading && <p>Loading</p>}  
 </form>  
 );  
};

In this example, useForm is used to create a form that can handle both create and edit actions. The register function is used to register input/select fields in the form. The handleSubmit function is used to handle form submission. The onFinish function is called when the form is successfully submitted. You can find more information about useForm in the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form/). ---------------------- 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

continuing-cyanOP•14mo ago

@kapa.ai but this should be a modal

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can wrap the form inside a modal using the useModalForm hook. Here's an example:

import { Modal, useModalForm } from "@refinedev/antd";  
import { Form, Input, Button } from "antd";  
import React from "react";  

export const UserCreateOrEdit: React.FC<{trigger: string}> = ({ trigger }) => {  
 const { formProps, modalProps, submit } = useModalForm({  
 action: trigger,  
 });  

 return (  
 <Modal {...modalProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Button key="submit" type="primary" onClick={submit}>  
 Submit  
 </Button>
 </Form>  
 </Modal>  
 );  
};

import { Modal, useModalForm } from "@refinedev/antd";  
import { Form, Input, Button } from "antd";  
import React from "react";  

export const UserCreateOrEdit: React.FC<{trigger: string}> = ({ trigger }) => {  
 const { formProps, modalProps, submit } = useModalForm({  
 action: trigger,  
 });  

 return (  
 <Modal {...modalProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Button key="submit" type="primary" onClick={submit}>  
 Submit  
 </Button>
 </Form>  
 </Modal>  
 );  
};

In this example, a trigger prop is passed to the UserCreateOrEdit component. This prop is then used to determine the action (create or edit) for the useModalForm hook. The formProps are passed to the Ant Design <Form /> component and modalProps are passed to the <Modal /> component. The submit function is used to manually submit the form. You can call the UserCreateOrEdit component from different places like this:

<UserCreateOrEdit trigger="create" />
<UserCreateOrEdit trigger="edit" />

<UserCreateOrEdit trigger="create" />
<UserCreateOrEdit trigger="edit" />

Please note that this is a general approach and you might need to adjust it based on your specific use case. You can find more information about useModalForm in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/). ---------------------- 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

continuing-cyanOP•14mo ago

@kapa.ai when it is edit the form values should be prefilled

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: @parothia That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

Form inside a modal

Did you find this page helpful?