multi create/edit form

How to create a form where I can update/create multiple items of a resource

2 Replies

Hi @PIGFY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a form where you can update or create multiple items of a resource in a Refine application, you can use the useForm hook from Refine's Ant Design integration. This hook can handle edit, create, and clone actions. Below is an example of how you can set up such a form. Step-by-Step Guide 1. Set Up the Project: Ensure you have a Refine project set up with Ant Design. You can follow the project setup guide here (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/#project-setup). 2. Create the Form Component: Use the useForm hook to create a form that can handle multiple items. Below is an example of how to create a form for multiple items. Example Code

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

const MultiItemForm: React.FC = () => {
  const { formProps, saveButtonProps } = useForm();
return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.List name="items">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, fieldKey, ...restField }) => (
                <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                  <Form.Item
                    {...restField}
                    name={[name, 'title']}
                    fieldKey={[fieldKey, 'title']}
                    rules={[{ required: true, message: 'Missing title' }]}
                  >
                    <Input placeholder="Title" />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, 'content']}
                    fieldKey={[fieldKey, 'content']}
                    rules={[{ required: true, message: 'Missing content' }]}
                  >
                    <Input placeholder="Content" />
                  </Form.Item>
                  <Button type="link" onClick={() => remove(name)}>
                    Remove
                  </Button>
                </Space>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={() => add()} block>
                  Add Item
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </Create>
  );
};

export default MultiItemForm;

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

const MultiItemForm: React.FC = () => {
  const { formProps, saveButtonProps } = useForm();
return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.List name="items">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, fieldKey, ...restField }) => (
                <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                  <Form.Item
                    {...restField}
                    name={[name, 'title']}
                    fieldKey={[fieldKey, 'title']}
                    rules={[{ required: true, message: 'Missing title' }]}
                  >
                    <Input placeholder="Title" />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, 'content']}
                    fieldKey={[fieldKey, 'content']}
                    rules={[{ required: true, message: 'Missing content' }]}
                  >
                    <Input placeholder="Content" />
                  </Form.Item>
                  <Button type="link" onClick={() => remove(name)}>
                    Remove
                  </Button>
                </Space>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={() => add()} block>
                  Add Item
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </Create>
  );
};

export default MultiItemForm;

Explanation - Form.List: This component from Ant Design allows you to manage a list of form items dynamically. It provides add and remove functions to handle adding and removing items. - useForm Hook: This hook from Refine's Ant Design integration manages form state and actions. It can handle create, edit, and clone actions. Additional Resources - useForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#action) - Ant Design Form.List Documentation (https://ant.design/components/form/#Form.List) By following this approach, you can create a form that allows you to update or create multiple items of a resource efficiently. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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