wise-white•5mo ago

Form not filled up with values on Clone page in Create component in AntD

When I go to my clone page the form fields are not automatically filled with values. I spread formProps from useForm hook on the Form element but it does not work.

2 Replies

kapa.ai•5mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When using the useForm hook in refine to create a clone page with Ant Design, you need to ensure that the form is correctly populated with the values of the record you are cloning. Here are some steps and considerations to help you achieve this: 1. Ensure Correct Action: Make sure you are setting the action to "clone" in the useForm hook. This will ensure that the form knows it needs to fetch the existing record's data. 2. Fetch Record Data: The useForm hook should automatically fetch the record data using the id from the route or the setId function. Ensure that the id is correctly set. 3. Spread formProps: Ensure you are spreading formProps correctly on the Form component. Here is an example of how you can set up your clone page:

import React from "react";  
import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

interface IPost {  
  id: number;  
  title: string;  
  content: string;  
}  

const PostClonePage: React.FC = () => {  
  const { formProps, saveButtonProps } = useForm<IPost>({ action: "clone" });  

  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} layout="vertical">  
        <Form.Item  
          label="Title"  
          name="title"  
          rules={[{ required: true }]}  
        >  
          <Input />  
        </Form.Item>  
        <Form.Item  
          label="Content"  
          name="content"  
          rules={[{ required: true }]}  
        >  
          <Input.TextArea />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

import React from "react";  
import { Create, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  

interface IPost {  
  id: number;  
  title: string;  
  content: string;  
}  

const PostClonePage: React.FC = () => {  
  const { formProps, saveButtonProps } = useForm<IPost>({ action: "clone" });  

  return (  
    <Create saveButtonProps={saveButtonProps}>  
      <Form {...formProps} layout="vertical">  
        <Form.Item  
          label="Title"  
          name="title"  
          rules={[{ required: true }]}  
        >  
          <Input />  
        </Form.Item>  
        <Form.Item  
          label="Content"  
          name="content"  
          rules={[{ required: true }]}  
        >  
          <Input.TextArea />  
        </Form.Item>  
      </Form>  
    </Create>  
  );  
};

Key Points: - Action Prop: Ensure the action prop is set to "clone" in the useForm hook. - ID Handling: The id should be correctly set either from the route or using the setId function. - Form Props: Spread formProps on the Form component to ensure it gets the necessary properties. For more detailed information, you can refer to the useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#action). If you are still facing issues, ensure that there are no race conditions with async defaultFormValues as mentioned in the documentation. You can track the loading state using defaultFormValuesLoading. For further assistance, you can also check the example provided by refine (https://refine.dev/docs/examples/form/antd/useForm/). If you have any more specific issues or need further clarification, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

Form not filled up with values on Clone page in Create component in AntD

Did you find this page helpful?