stormy-gold•10mo ago

Refine AntD Form create new records

How do I conventionally code a component that have an antd "Form" with input, map those inputs to each field of the type of that table in the database (I use Supabase), and POST that. This is the sumarry of my create page, anything I'm missing? Show me a full code of a page how to do this properly. import { Form, Input, Modal, Select } from 'antd'; export const PatientCreate = () => { return ( <Modal> <Form> <Form.Item><Input/></Form.Item> </Form> </Modal> )} This is my from my App.tsx: resources={[{ name: "patient", list: "/patient", create: "/patient/create" }]}>

14 Replies

kapa.ai•10mo ago

Hi @lukevo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can guide you on how to create a new record using a form in Refine with Ant Design and Supabase. Firstly, you need to import the necessary components and hooks from Refine and Ant Design. The useForm hook from Refine is used to handle form data and it integrates with Ant Design's Form component. The useForm hook provides formProps and saveButtonProps which are passed to the Form and SaveButton components respectively. Here is an example of how you can structure your PatientCreate component:

import { useForm, SaveButton } from "@refinedev/antd";  
import { Form, Input, InputNumber } from "antd";  
  
export const PatientCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IPatient>();  
  
 return (  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Age"  
 name="age"  
 rules={[{ required: true }]}  
 >  
 <InputNumber />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}  
  
interface IPatient {  
 id: string;  
 name: string;  
 age: number;  
}

import { useForm, SaveButton } from "@refinedev/antd";  
import { Form, Input, InputNumber } from "antd";  
  
export const PatientCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IPatient>();  
  
 return (  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Age"  
 name="age"  
 rules={[{ required: true }]}  
 >  
 <InputNumber />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}  
  
interface IPatient {  
 id: string;  
 name: string;  
 age: number;  
}

In this example, IPatient is the type of the patient data. You should replace it with the actual type of your patient data. The name and age are the fields of the patient data. You should replace them with the actual fields of your patient data. You also need to make sure that the create property of the resources prop in the Refine component in your App.tsx file is set to the route of your PatientCreate page. Here is an example:

import { Refine } from "@refinedev/core";  
import PatientCreate from "./pages/PatientCreate";  
  
function App() {  
 return (  
 <Refine  
 resources={[  
 {  
 name: "patient",  
 list: "/patient",  
 create: "/patient/create",  
 },  
 ]}  
 >  
 {/* ... */}  
 </Refine>  
 );  
}  
  
export default App;

import { Refine } from "@refinedev/core";  
import PatientCreate from "./pages/PatientCreate";  
  
function App() {  
 return (  
 <Refine  
 resources={[  
 {  
 name: "patient",  
 list: "/patient",  
 create: "/patient/create",  
 },  
 ]}  
 >  
 {/* ... */}  
 </Refine>  
 );  
}  
  
export default App;

In this example, the PatientCreate page is imported and the create property is set to "/patient/create". Please note that this is a basic example and you might need to adjust it according to your needs. Sources: - Refine Ant Design Forms (https://refine.dev/docs/ui-integrations/ant-design/introduction#forms) - Refine Supabase Create Page (https://refine.dev/docs/data/packages/supabase#adding-a-create-page) - Refine Blog Post on Dynamic Forms (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#creating-a-form) - Refine Blog Post on Refine vs RedwoodJS (https://refine.dev/blog/refine-vs-redwood-js#refine-5) - Refine Blog Post on Project Setup (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#project-setup) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

stormy-goldOP•10mo ago

@kapa.ai That is very helpful and it works too. Now, for example I have a phone field which have 2 input, 1 for the phone code and 1 for the phone. I need to combine that to send to the POST as 1 value for "phone". How do I do this, and also for other fields too. Like if I want to combine First name and Last name into "fullname" to send to the POST as my type is "fullname: string" it's just the frontend that I divided into 2 fields for my user. <Form.Item label="Phone"> <Input addonBefore={phoneCountry} placeholder='9012345678' /> </Form.Item> <Form.Item label="Last name" name="lname"> <Input placeholder="Smith" /> </Form.Item> <Form.Item label="First name" name="fname"> <Input placeholder="John" /> </Form.Item>

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can modify the form data before it is sent to the API by using the onFinish function from the useForm hook. This function is called when the form is submitted and it receives the form values as its argument. You can use this function to combine the values of the phoneCountry and phone fields into a single phone value and the fname and lname fields into a single fullname value. Here is an example of how you can do this:

import { useForm, SaveButton } from "@refinedev/antd";  
import { Form, Input, InputNumber, Select } from "antd";  

export const PatientCreate = () => {  
 const { formProps, saveButtonProps, onFinish } = useForm<IPatient>();  

 const handleOnFinish = (values) => {  
  onFinish({  
   phone: `${values.phoneCountry}${values.phone}`,
   fullname: `${values.fname} ${values.lname}`,
   // include other fields here...
  });  
 };  

 return (  
  <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
   <Form.Item label="Phone Country" name="phoneCountry">  
    <Select /* options here... */ />  
   </Form.Item>  
   <Form.Item label="Phone" name="phone">  
    <Input />  
   </Form.Item>  
   <Form.Item label="First Name" name="fname">  
    <Input />  
   </Form.Item>  
   <Form.Item label="Last Name" name="lname">  
    <Input />  
   </Form.Item>  
   <SaveButton {...saveButtonProps} />  
  </Form>  
 )  
}  

interface IPatient {  
 phone: string;  
 fullname: string;  
 // define other fields here...
}

import { useForm, SaveButton } from "@refinedev/antd";  
import { Form, Input, InputNumber, Select } from "antd";  

export const PatientCreate = () => {  
 const { formProps, saveButtonProps, onFinish } = useForm<IPatient>();  

 const handleOnFinish = (values) => {  
  onFinish({  
   phone: `${values.phoneCountry}${values.phone}`,
   fullname: `${values.fname} ${values.lname}`,
   // include other fields here...
  });  
 };  

 return (  
  <Form {...formProps} onFinish={handleOnFinish} layout="vertical">  
   <Form.Item label="Phone Country" name="phoneCountry">  
    <Select /* options here... */ />  
   </Form.Item>  
   <Form.Item label="Phone" name="phone">  
    <Input />  
   </Form.Item>  
   <Form.Item label="First Name" name="fname">  
    <Input />  
   </Form.Item>  
   <Form.Item label="Last Name" name="lname">  
    <Input />  
   </Form.Item>  
   <SaveButton {...saveButtonProps} />  
  </Form>  
 )  
}  

interface IPatient {  
 phone: string;  
 fullname: string;  
 // define other fields here...
}

In this example, IPatient is the type of the patient data. You should replace it with the actual type of your patient data. The phone and fullname are the fields of the patient data. You should replace them with the actual fields of your patient data. Please note that this is a basic example and you might need to adjust it according to your needs. Sources: - Refine Ant Design Forms (https://refine.dev/docs/ui-integrations/ant-design/introduction#forms) - Refine Supabase Create Page (https://refine.dev/docs/data/packages/supabase#adding-a-create-page) - Refine Blog Post on Dynamic Forms (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#creating-a-form) - Refine Blog Post on Refine vs RedwoodJS (https://refine.dev/blog/refine-vs-redwood-js#refine-5) - Refine Blog Post on Project Setup (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#project-setup) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rising-crimson•10mo ago

@kapa.ai const { formProps, saveButtonProps, onFinish } = useForm<TPatient>(); const handleOnFinish = (values: any) => {
console.log("run") onFinish({
...values, });
};
return ( <Modal okButtonProps={{...saveButtonProps}} okText="Xong"> <Form onFinish={handleOnFinish} {...formProps} > My handleOnFinish is not running, not "run" is being logged in console

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like you're having trouble with the handleOnFinish function not being called when the form is submitted. This could be due to a few reasons, such as an error in your form validation or a problem with the form submission event. One possible issue could be that the onFinish prop is not being correctly passed to the Form component. Make sure that the onFinish prop is being passed to the Form component like this: onFinish={handleOnFinish}. Another possible issue could be that the form submission event is being prevented for some reason. Make sure that there's no code that could be preventing the form submission event, such as a preventDefault call. If none of these suggestions solve your problem, you might want to try using the onFinishFailed prop to see if the form submission is failing due to validation errors. Here's how you can do this:

<Form onFinish={handleOnFinish} onFinishFailed={handleOnFinishFailed} {...formProps} >

<Form onFinish={handleOnFinish} onFinishFailed={handleOnFinishFailed} {...formProps} >

And then define the handleOnFinishFailed function like this:

const handleOnFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const handleOnFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

This will log an error message to the console if the form submission fails due to validation errors. If you're still having trouble, please provide more details about your issue. Sources: - Refine Discord Support Thread (https://discord.com/channels/837692625737613362/1186343138751676526) - Refine Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api) - Refine Blog Post (https://refine.dev/blog/react-hook-form-validation-examples#form-submission) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rising-crimson•10mo ago

@kapa.ai nope, the form submit successfully, no console log coming from onFinish and onFinishFailed

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the onFinish and onFinishFailed callbacks are not being triggered, it could be due to the form not being submitted properly. One possible reason could be that the SaveButton component is not inside the Form component. The SaveButton component should be a child of the Form component to trigger the form submission. Here is an example of how you can structure your form:

<Form onFinish={handleOnFinish} {...formProps}>
  {/* form fields here... */}
  <Form.Item>
    <SaveButton {...saveButtonProps} />
  </Form.Item>
</Form>

<Form onFinish={handleOnFinish} {...formProps}>
  {/* form fields here... */}
  <Form.Item>
    <SaveButton {...saveButtonProps} />
  </Form.Item>
</Form>

In this example, the SaveButton component is inside the Form component. If this doesn't solve your problem, you might want to check if there's any code that could be preventing the form submission, such as a preventDefault call or an error in your form validation. If you're still having trouble, please provide more details about your issue. Sources: - Refine Discord Support Thread (https://discord.com/channels/837692625737613362/1186343138751676526) - Refine Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api) - Refine Blog Post (https://refine.dev/blog/react-hook-form-validation-examples#form-submission) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rising-crimson•10mo ago

const { formProps, saveButtonProps, onFinish } = useForm<TPatient>(); const handleOnFinish = (values: any) => { console.log("chạy") onFinish({ ...values, //Lấy hết value của mấy cái field bây giờ phone: "13", }); }; const handleOnFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo); }; return ( <Modal className="modal-create-patient" open title="Tạo bệnh nhân mới"> <Form onFinishFailed={handleOnFinishFailed} onFinish={handleOnFinish} {...formProps} className="form-create-patient" layout="inline" style={{ gap: "1rem" }}> <Form.Item label="Họ" name="lname"> <Input style={{ width: "100px" }} placeholder="Nguyễn" /> </Form.Item> <Form.Item label="Tên" name="fname"> <Input placeholder="Văn Anh" /> </Form.Item> <Form.Item label="Điện thoại" style={{ width: "300px" }} name="phone"> <PhoneInput preferredCountries={['vn', 'us', 'au', 'uk']} searchPlaceholder='Tìm mã vùng' enableSearch country='vn' /> </Form.Item> <Form.Item> <SaveButton {...saveButtonProps} /> </Form.Item> </Form> </Modal> ); }; This is my full code, onFinish and onFinishFailed is not calling @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like you're having trouble with the onFinish and onFinishFailed callbacks not being triggered. This could be due to a few reasons. One possible issue could be that the SaveButton component is not triggering the form submission. The SaveButton component should be a child of the Form component to trigger the form submission. In your code, it seems to be correctly placed inside the Form component. Another possible issue could be that the form submission event is being prevented for some reason. Make sure that there's no code that could be preventing the form submission event, such as a preventDefault call. If none of these suggestions solve your problem, you might want to try using the onSubmit prop of the form element to see if the form submission is being handled correctly. Here's how you can do this:

<Form onSubmit={handleOnSubmit} onFinishFailed={handleOnFinishFailed} onFinish={handleOnFinish} {...formProps} className="form-create-patient" layout="inline" style={{ gap: "1rem" }}>

<Form onSubmit={handleOnSubmit} onFinishFailed={handleOnFinishFailed} onFinish={handleOnFinish} {...formProps} className="form-create-patient" layout="inline" style={{ gap: "1rem" }}>

And then define the handleOnSubmit function like this:

const handleOnSubmit = (event) => {
  event.preventDefault();
  console.log('Form submitted');
};

const handleOnSubmit = (event) => {
  event.preventDefault();
  console.log('Form submitted');
};

This will log a message to the console when the form is submitted. If you're still having trouble, please provide more details about your issue. Sources: - Refine Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api) - Refine Blog Post (https://refine.dev/blog/react-hook-form-validation-examples#form-submission) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

Refine AntD Form create new records

Did you find this page helpful?