absent-sapphire
absent-sapphire16mo ago

useForm with action edit adds a / after path

useForm with action edit adds a / after path
5 Replies
kapa.ai
kapa.ai16mo ago
Hi @saarthak08. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useForm hook in refine can be used with the action: "edit" for editing an existing record. It requires the id of the record to determine which record to edit. By default, it uses the id from the route. This means that when you use useForm with action: "edit", it will append the id of the record to the path of your route. For example, if you have a route like localhost:3000/edit/, and you are editing the record with id 123, the useForm hook will make a request to localhost:3000/edit/123. Here is an example of how to use useForm with action: "edit":
import { useForm } from "@refinedev/react-hook-form";

const PostEditPage: 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>Content: </label>
<br />
<label>Status: </label>
<select {...register("status")}>
<option value="published">published</option>
<option value="draft">draft</option>
<option value="rejected">rejected</option>
</select>
<br />
<textarea
{...register("content", { required: true })}
rows={10}
cols={50}
/>
{errors.content && <span>This field is required</span>}
<br />
<input type="submit" value="Submit" />
{formLoading && <p>Loading</p>}
</form>
);
};
import { useForm } from "@refinedev/react-hook-form";

const PostEditPage: 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>Content: </label>
<br />
<label>Status: </label>
<select {...register("status")}>
<option value="published">published</option>
<option value="draft">draft</option>
<option value="rejected">rejected</option>
</select>
<br />
<textarea
{...register("content", { required: true })}
rows={10}
cols={50}
/>
{errors.content && <span>This field is required</span>}
<br />
<input type="submit" value="Submit" />
{formLoading && <p>Loading</p>}
</form>
);
};
In this example, when the form is submitted, it updates the record with useUpdate and the id from the route is used to determine which record to update. For more information, you can refer to the useForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai16mo ago
<@783220602336444416> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire
absent-sapphireOP16mo ago
@kapa.ai useForm with PUT
kapa.ai
kapa.ai16mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The useForm hook in refine is used to manage form data and handle form submission. When you use useForm with the action: "edit" option, it uses the HTTP PUT method to update an existing record. Here is an example of how to use useForm with action: "edit":
import { useForm } from "@refinedev/react-hook-form";

const PostEditPage: React.FC = () => {
const {
refineCore: { onFinish, formLoading },
register,
handleSubmit,
formState: { errors },
} = useForm({ resource: "posts", action: "edit" });

return (
<form onSubmit={handleSubmit(onFinish)}>
<label>Title: </label>
<input {...register("title", { required: true })} />
{errors.title && <span>This field is required</span>}
<br />
<label>Content: </label>
<textarea
{...register("content", { required: true })}
rows={10}
cols={50}
/>
{errors.content && <span>This field is required</span>}
<br />
<input type="submit" value="Submit" />
{formLoading && <p>Loading</p>}
</form>
);
};
import { useForm } from "@refinedev/react-hook-form";

const PostEditPage: React.FC = () => {
const {
refineCore: { onFinish, formLoading },
register,
handleSubmit,
formState: { errors },
} = useForm({ resource: "posts", action: "edit" });

return (
<form onSubmit={handleSubmit(onFinish)}>
<label>Title: </label>
<input {...register("title", { required: true })} />
{errors.title && <span>This field is required</span>}
<br />
<label>Content: </label>
<textarea
{...register("content", { required: true })}
rows={10}
cols={50}
/>
{errors.content && <span>This field is required</span>}
<br />
<input type="submit" value="Submit" />
{formLoading && <p>Loading</p>}
</form>
);
};
In this example, when the form is submitted, it updates the record with useUpdate and the id from the route is used to determine which record to update. For more information, you can refer to the useForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai16mo ago
<@783220602336444416> kapa.ai is still learning and improving, please let us know how it did by reacting below