absent-sapphire•9mo ago

How to populate a related field in Edit form with useForm?

Hi, I want to create an edit form which I need to load a related field and make sure it's editable in the form. How can I do it? I seems that by passing a { meta: { populate: ['field'] } } doesn't work. I'm using @nestjsx/crud adapter

3 Replies

kapa.ai•9mo ago

Hi @_erichu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create an edit form with a related field in Refine, you can use the useForm and useSelect hooks. The useForm hook is used to handle form operations, while the useSelect hook is used to fetch and display select options inside the form. Here's an example of how you can do it:

import { IResourceComponentsProps } from "@refinedev/core";  
import { Edit, useForm, useSelect } from "@refinedev/antd";  
import { Form, Select, Input } from "antd";  
  
import { IContact } from "interfaces";  
  
export const EditContact: React.FC<IResourceComponentsProps> = () => {  
 const { formProps, saveButtonProps, queryResult } = useForm<IContact>({  
 meta: { populate: ["client"] },  
 });  
  
 const defaultClientCompany = queryResult?.data?.data;  
  
 const { selectProps } = useSelect({  
 resource: "clients",  
 defaultValue: defaultClientCompany?.client?.id,  
 optionValue: "id",  
 optionLabel: "name",  
  
 pagination: {  
 mode: "server"  
 }  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form   
 {...formProps}  
 layout="vertical"  
 wrapperCol={{md: 18, lg: 16}}  
 >  
 <Form.Item label="First Name" name="first_name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Last Name" name="last_name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Client Company" name={["client", "id"]}>  
 <Select {...selectProps} />  
 </Form.Item>  
 <Form.Item label="Phone Number" name="phone_number">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Email" name="email">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Job" name="job">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

import { IResourceComponentsProps } from "@refinedev/core";  
import { Edit, useForm, useSelect } from "@refinedev/antd";  
import { Form, Select, Input } from "antd";  
  
import { IContact } from "interfaces";  
  
export const EditContact: React.FC<IResourceComponentsProps> = () => {  
 const { formProps, saveButtonProps, queryResult } = useForm<IContact>({  
 meta: { populate: ["client"] },  
 });  
  
 const defaultClientCompany = queryResult?.data?.data;  
  
 const { selectProps } = useSelect({  
 resource: "clients",  
 defaultValue: defaultClientCompany?.client?.id,  
 optionValue: "id",  
 optionLabel: "name",  
  
 pagination: {  
 mode: "server"  
 }  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form   
 {...formProps}  
 layout="vertical"  
 wrapperCol={{md: 18, lg: 16}}  
 >  
 <Form.Item label="First Name" name="first_name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Last Name" name="last_name">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Client Company" name={["client", "id"]}>  
 <Select {...selectProps} />  
 </Form.Item>  
 <Form.Item label="Phone Number" name="phone_number">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Email" name="email">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Job" name="job">  
 <Input />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};

In this example, the useForm hook is used with the populate option to fetch the related client field. The useSelect hook is then used to fetch and display the client options in a Select component. Please note that the populate option might not work as expected if the backend does not support it. In such cases, you might need to manually handle the population of related fields. You can refer to the Refine documentation (https://refine.dev/docs/tutorial/adding-crud-pages/mui/index/#handling-relationships) for more information on how to handle relationships manually. Also, please note that the above example is based on the Ant Design System. If you're using a different design system, you might need to adjust the code accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

absent-sapphire•9mo ago

It turned out that @nestjsx/crud doesn't support populating any related tables