probable-pink•6mo ago

How to use edit model form without id?

I have a requirement where I want to edit a data in a modal form but I don't want to call the api to fetch data. Because I already have the data from the list value. I want the value from the list to be default values in edit modal form.

13 Replies

kapa.ai•6mo ago

Hi @Dipesh Bajgain. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, Refine's useForm hook with action: "edit" requires an id to determine the record to edit. By default, it uses the id from the route and fetches the record data according to the id with useOne and returns the queryResult for you to fill the form. After the form is submitted, it updates the record with useUpdate. However, if you already have the data from the list and you don't want to call the API to fetch data, you can set the initial values of the form fields using the initialValues property of the useForm hook. Here's an example:

import React from "react";  
import { Textarea, TextInput } from "@mantine/core";  
import { Edit, useForm } from "@refinedev/mantine";  

const PostEditPage: React.FC = () => {  
 const { saveButtonProps, getInputProps, errors } = useForm({  
 initialValues: {  
 title: "Your title here",  // replace with your data
 content: "Your content here",  // replace with your data
 },  
 validate: {  
 title: (value) => value.length < 3 && "Title must be at least 3 characters",  
 content: (value) => value.length < 10 && "Content must be at least 10 characters",  
 },  
 });  

 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <TextInput mt={8} label="Title" placeholder="Title" withAsterisk {...getInputProps("title")} />  
 <Textarea  
 label="Content"  
 placeholder="Content"  
 minRows={4}  
 maxRows={4}  
 withAsterisk  
 {...getInputProps("content")}  
 />  
 </form>  
 </Edit>  
 );  
};

import React from "react";  
import { Textarea, TextInput } from "@mantine/core";  
import { Edit, useForm } from "@refinedev/mantine";  

const PostEditPage: React.FC = () => {  
 const { saveButtonProps, getInputProps, errors } = useForm({  
 initialValues: {  
 title: "Your title here",  // replace with your data
 content: "Your content here",  // replace with your data
 },  
 validate: {  
 title: (value) => value.length < 3 && "Title must be at least 3 characters",  
 content: (value) => value.length < 10 && "Content must be at least 10 characters",  
 },  
 });  

 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <form>  
 <TextInput mt={8} label="Title" placeholder="Title" withAsterisk {...getInputProps("title")} />  
 <Textarea  
 label="Content"  
 placeholder="Content"  
 minRows={4}  
 maxRows={4}  
 withAsterisk  
 {...getInputProps("content")}  
 />  
 </form>  
 </Edit>  
 );  
};

In this example, replace "Your title here" and "Your content here" with your actual data. The getInputProps function is used to bind the form fields to the form state. Please note that this approach bypasses the automatic fetching of data by the useForm hook and assumes that you are managing the data fetching yourself. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form#action). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

probable-pink•6mo ago

@kapa.ai I am using useModalForm from antd.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the case of useModalForm from Ant Design, you can also set the initial values of the form fields using the initialValues property. Here's an example:

import { Modal, Button } from "antd";
import { useModalForm } from "@refinedev/antd";

const YourComponent = () => {
  const { formProps, modalProps, showButtonProps } = useModalForm({
    initialValues: {
      title: "Your title here",  // replace with your data
      content: "Your content here",  // replace with your data
    },
  });

  return (
    <>
      <Button {...showButtonProps}>Edit</Button>
      <Modal {...modalProps}>
        <Form {...formProps}>
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="Content" name="content">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

import { Modal, Button } from "antd";
import { useModalForm } from "@refinedev/antd";

const YourComponent = () => {
  const { formProps, modalProps, showButtonProps } = useModalForm({
    initialValues: {
      title: "Your title here",  // replace with your data
      content: "Your content here",  // replace with your data
    },
  });

  return (
    <>
      <Button {...showButtonProps}>Edit</Button>
      <Modal {...modalProps}>
        <Form {...formProps}>
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="Content" name="content">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

In this example, replace "Your title here" and "Your content here" with your actual data. The formProps are used to bind the form fields to the form state. Please note that this approach bypasses the automatic fetching of data by the useModalForm hook and assumes that you are managing the data fetching yourself. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

probable-pink•6mo ago

@kapa.ai Object literal may only specify known properties, and 'initialValues' does not exist in type 'UseModalFormProps

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. The initialValues property is not available in the useModalForm hook according to the provided extracts. The useModalForm hook in Refine does not directly support setting initial values. It is designed to work with the create action and fetches data based on the id provided in the route for edit or clone actions. If you want to bypass the automatic data fetching and use your own data, you might need to manually manage the form state. You can use Ant Design's Form component with its own initialValues prop for this purpose. Here's an example:

import { Modal, Button, Form, Input } from "antd";
import { useModalForm } from "@refinedev/antd";

const YourComponent = () => {
  const { modalProps, showButtonProps } = useModalForm();

  return (
    <>
      <Button {...showButtonProps}>Edit</Button>
      <Modal {...modalProps}>
        <Form
          initialValues={{
            title: "Your title here",  // replace with your data
            content: "Your content here",  // replace with your data
          }}
        >
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="Content" name="content">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

import { Modal, Button, Form, Input } from "antd";
import { useModalForm } from "@refinedev/antd";

const YourComponent = () => {
  const { modalProps, showButtonProps } = useModalForm();

  return (
    <>
      <Button {...showButtonProps}>Edit</Button>
      <Modal {...modalProps}>
        <Form
          initialValues={{
            title: "Your title here",  // replace with your data
            content: "Your content here",  // replace with your data
          }}
        >
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="Content" name="content">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

In this example, replace "Your title here" and "Your content here" with your actual data. The initialValues prop of Ant Design's Form component is used to set the initial form field values. Please note that this approach bypasses the automatic fetching of data by the useModalForm hook and assumes that you are managing the data fetching yourself. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

probable-pink•6mo ago

@kapa.ai my initialvalues are dynamic so when the data are not present the form is mounted. So, the initialvalues are empty and when the initialvalues are loaded from the api the form is not updated.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Ant Design's Form component, the initialValues prop only sets the initial values when the form is first rendered. If you want to update the form values after the form has been mounted, you can use the setFieldsValue method from the form instance. Here's an example:

import { Modal, Button, Form, Input } from "antd";
import { useModalForm } from "@refinedev/antd";

const YourComponent = () => {
  const { modalProps, showButtonProps } = useModalForm();
  const [form] = Form.useForm();

  // Replace this with your actual API call
  const fetchApiData = async () => {
    return {
      title: "Your title here",  // replace with your data
      content: "Your content here",  // replace with your data
    };
  };

  React.useEffect(() => {
    fetchApiData().then((data) => {
      form.setFieldsValue(data);
    });
  }, [form]);

  return (
    <>
      <Button {...showButtonProps}>Edit</Button>
      <Modal {...modalProps}>
        <Form form={form}>
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="Content" name="content">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

import { Modal, Button, Form, Input } from "antd";
import { useModalForm } from "@refinedev/antd";

const YourComponent = () => {
  const { modalProps, showButtonProps } = useModalForm();
  const [form] = Form.useForm();

  // Replace this with your actual API call
  const fetchApiData = async () => {
    return {
      title: "Your title here",  // replace with your data
      content: "Your content here",  // replace with your data
    };
  };

  React.useEffect(() => {
    fetchApiData().then((data) => {
      form.setFieldsValue(data);
    });
  }, [form]);

  return (
    <>
      <Button {...showButtonProps}>Edit</Button>
      <Modal {...modalProps}>
        <Form form={form}>
          <Form.Item label="Title" name="title">
            <Input />
          </Form.Item>
          <Form.Item label="Content" name="content">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

In this example, replace "Your title here" and "Your content here" with your actual data. The useEffect hook is used to fetch the data from the API when the component is mounted. The setFieldsValue method is then used to update the form values with the fetched data. Please note that this approach bypasses the automatic fetching of data by the useModalForm hook and assumes that you are managing the data fetching yourself. For more information, you can refer to the Ant Design Form documentation (https://ant.design/components/form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

wise-white•6mo ago

Hey @Dipesh Bajgain I think you can use queryOptions.enabled: false with your hook. That should disable fetching data, before rendering the modal. LMK if that helps!

probable-pink•6mo ago

Hey @Batu, Thanks for your response. I have used the model form for create so that I don't need to fetch the data and updated the initial values of form using useEffect hook suggested by kappa.ai and is working fine for now.