form with child object

Do you have any examples of using a form where one of the fields is populated from anther resource / model

2 Replies

Hi @Pops / Spruce. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there is an example in the Refine documentation where a form field is populated from another resource. In this case, a select field for "Category" is populated with options from a "categories" resource. Here is the relevant code:

import { useSelect } from "@refinedev/core";  
import { useForm } from "@refinedev/react-hook-form";  
  
export const PostEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading, queryResult },  
 register,  
 handleSubmit,  
 resetField,  
 formState: { errors },  
 } = useForm();  
  
 const { options } = useSelect({  
 resource: "categories",  
 defaultValue: queryResult?.data?.data.category.id,  
 });  
  
 useEffect(() => {  
 resetField("category.id");  
 }, [options]);  
  
 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>Category: </label>  
 <select  
 {...register("category.id", {  
 required: true,  
 })}  
 defaultValue={queryResult?.data?.data.category.id}  
 >  
 {options?.map((category) => (  
 <option key={category.value} value={category.value}>  
 {category.label}  
 </option>  
 ))}  
 </select>  
 {errors.category && <span>This field is required</span>}  
 <br />  
 <label>Content: </label>  
 <br />  
 <textarea  
 {...register("content", { required: true })}  
 rows={10}  
 cols={50}  
 />  
 {errors.content && <span>This field is required</span>}  
 <br />  
  
 {queryResult?.data?.data?.thumbnail && (  
 <>  
 <br />  
 <label>Image: </label>  
 <br />  
  
 <img  
 src={queryResult?.data?.data?.thumbnail}  
 width={200}  
 height={200}  
 />  
 <br />  
 <br />  
 </>  
 )}  
  
 <input type="submit" value="Submit" />

import { useSelect } from "@refinedev/core";  
import { useForm } from "@refinedev/react-hook-form";  
  
export const PostEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading, queryResult },  
 register,  
 handleSubmit,  
 resetField,  
 formState: { errors },  
 } = useForm();  
  
 const { options } = useSelect({  
 resource: "categories",  
 defaultValue: queryResult?.data?.data.category.id,  
 });  
  
 useEffect(() => {  
 resetField("category.id");  
 }, [options]);  
  
 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>Category: </label>  
 <select  
 {...register("category.id", {  
 required: true,  
 })}  
 defaultValue={queryResult?.data?.data.category.id}  
 >  
 {options?.map((category) => (  
 <option key={category.value} value={category.value}>  
 {category.label}  
 </option>  
 ))}  
 </select>  
 {errors.category && <span>This field is required</span>}  
 <br />  
 <label>Content: </label>  
 <br />  
 <textarea  
 {...register("content", { required: true })}  
 rows={10}  
 cols={50}  
 />  
 {errors.content && <span>This field is required</span>}  
 <br />  
  
 {queryResult?.data?.data?.thumbnail && (  
 <>  
 <br />  
 <label>Image: </label>  
 <br />  
  
 <img  
 src={queryResult?.data?.data?.thumbnail}  
 width={200}  
 height={200}  
 />  
 <br />  
 <br />  
 </>  
 )}  
  
 <input type="submit" value="Submit" />

In this example, the useSelect hook is used to fetch the options for the "Category" select field from the "categories" resource. The defaultValue for the select field is set to the category id of the post being edited. You can find more details in the Refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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