graceful-blue•2y ago

Reusable Form component for #edit and #create

I know I've seen a question about a reusable Form component that can both be used for #edit and #create. As we're starting to build more complex workflows, I'd love to have reusable Fields-Component that I can use in another Context (like a DTO) to avoid duplication. @kapa.ai is that possible? We're using AntD as the Component-Framework.

2 Replies

kapa.ai•2y ago

Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to create reusable Form components in Refine using Ant Design. You can use the useForm hook provided by Refine to manage form data and handle actions like create and edit. This hook offers adapters that let Refine integrate with Ant Design's <Form> component. Here's an example of how you can use the useForm hook to create a form:

import React from "react";  
import {  
 Create,  
 Button,  
 Form,  
 Input,  
 Space,  
 Icons,  
 useForm,  
} from "@refinedev/antd";  
  
interface IFormValue {  
 name: string;  
 email: string;  
 skills: string;  
}  
  
export default function PostCreate(Props: any) {  
 const { formProps, saveButtonProps } = useForm<IFormValue>();  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form size={"large"} {...formProps}>  
 <Input placeholder="e.g John" />  
 <Input placeholder="e.g john@email.com" />  
 </Form>  
 </Create>  
 );  
}

import React from "react";  
import {  
 Create,  
 Button,  
 Form,  
 Input,  
 Space,  
 Icons,  
 useForm,  
} from "@refinedev/antd";  
  
interface IFormValue {  
 name: string;  
 email: string;  
 skills: string;  
}  
  
export default function PostCreate(Props: any) {  
 const { formProps, saveButtonProps } = useForm<IFormValue>();  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form size={"large"} {...formProps}>  
 <Input placeholder="e.g John" />  
 <Input placeholder="e.g john@email.com" />  
 </Form>  
 </Create>  
 );  
}

In this example, useForm is used to handle form data. The formProps includes all necessary values to manage Ant Design Form components. The saveButtonProps is used to handle the form submission. You can also use the useForm hook to create an editing form:

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input, Select } from "antd";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Status" name="status">  
 <Select  
 options={[  
 {  
 label: "Published",  
 value: "published",  
 },  
 {  
 label: "Draft",  
 value: "draft",  
 },  
 {  
 label: "Rejected",  
 value: "rejected",  
 },  
 ]}  
 />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
 status: "published" | "draft" | "rejected";  
}

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input, Select } from "antd";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Status" name="status">  
 <Select  
 options={[  
 {  
 label: "Published",  
 value: "published",  
 },  
 {  
 label: "Draft",  
 value: "draft",  
 },  
 {  
 label: "Rejected",  
 value: "rejected",  
 },  
 ]}  
 />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
 status: "published" | "draft" | "rejected";  
}

In this example, if you navigate to /posts/edit/1234 it will manage the data of the post with id of 1234 in an editing context. You can find more detailed information in the Refine Documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useForm) and Refine Blog (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

Reusable Form component for #edit and #create

Did you find this page helpful?