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
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:
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:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•6mo 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>
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:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
constant-blue•6mo 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
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
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:
And then define the handleOnFinishFailed
function like this:
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:
----------------------<@652499665090117645> kapa.ai is still learning and improving, please let us know how it did by reacting below
constant-blue•6mo ago
@kapa.ai nope, the form submit successfully, no console log coming from onFinish and onFinishFailed
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:
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:
----------------------<@652499665090117645> kapa.ai is still learning and improving, please let us know how it did by reacting below
constant-blue•6mo 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
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:
And then define the handleOnSubmit
function like this:
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:
----------------------<@652499665090117645> kapa.ai is still learning and improving, please let us know how it did by reacting below