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.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.useModalForm in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/).UserCreate component and use it inside the form. Here's an example:trigger prop is passed to the UserCreate component. This prop is then used inside the form to display the action that triggered the modal.UserCreate component from different places like this: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.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.useForm in the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form/).useModalForm hook. Here's an example: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.UserCreateOrEdit component from different places like this:useModalForm in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/).useModalFormuseModalFormuseModalFormuseModalFormuseModalFormuseModalForm<Form /><Form />modalPropsmodalProps<Modal /><Modal />UserCreateUserCreateUserCreateeditediteditregisterUserCreateOrEditUserCreateOrEditimport { 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<{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>
);
}; <UserCreate trigger="action1" />
<UserCreate trigger="action2" />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 { 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>
);
}; <UserCreateOrEdit trigger="create" />
<UserCreateOrEdit trigger="edit" />