conscious-sapphire•14mo ago

Clone form is blank

Hi, I'm trying to create a clone form but I'm getting a blank form each time. I created my resource action and route as shown clone: "/rent_payments/clone/:id",

<Route
path="clone/:id"
element={<RentPaymentCreate />}
 />

But when I navigate to /rent_payments/clone/54 I get a blank form

4 Replies

kapa.ai•14mo ago

Hi @ahnaf1022. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you might not be using the useForm hook with the action: "clone" property in your RentPaymentCreate component. To create a clone form, you need to use the useForm hook with the action: "clone" property. Here's an example of how to use useForm with action: "clone":

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

interface IRentPayment {
  id: number;
  // Add other properties of your RentPayment model
}

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

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        {/* Add your form items here */}
        <Form.Item
          label="Example Field"
          name="exampleField"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

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

interface IRentPayment {
  id: number;
  // Add other properties of your RentPayment model
}

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

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        {/* Add your form items here */}
        <Form.Item
          label="Example Field"
          name="exampleField"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Create>
  );
};

Make sure to replace the IRentPayment interface and form items with your actual model properties. For more information, refer to the refine documentation on useForm with action: "clone" (https://refine.dev/docs/api-reference/core/hooks/useForm#action-clone). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

conventional-tan•14mo ago

this is not enough information to debug 😦 do you have an error on network ? is your show page works ? if you provide reproducible example, i'm happy to debug

conscious-sapphire•14mo ago

Okay I will try to create a code sandbox @alicanerdurmaz I figured out the problem. Turns out it was because I included initialValues in the Form <Form {...formProps} layout="vertical" initialValues={{ ... }}> After removing initialValues it works fine