How to submit form component in modal dialogue using antd react component library

1. Introduction to Ant Design and React

Ant Design (short for antd) is a UI component library based on React that provides developers with a wide range of high-quality components, facilitating the rapid development of enterprise-level back-office products. Its components cover a broad spectrum, from basic elements such as buttons and input fields to complex ones like tables and modal windows.

2. Creating a React Application and Introducing Ant Design

First, ensure you have a React application environment set up. If not, you can quickly create one using Create React App:

bash
npx create-react-app my-app
cd my-app

Then, install Ant Design:

bash
npm install antd

3. Importing Required Components

In your React component, import the required components: Modal (modal dialog), Form (form), and others as needed:

javascript
import React, { useState } from 'react';
import { Modal, Button, Form, Input } from 'antd';

4. Creating the Modal Dialog and Form

Next, we will create a modal dialog that contains a form embedded within it:

javascript
const App = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    console.log('Handle form submission');
    setVisible(false);
  };

  const handleCancel = () => {
    console.log('Handle cancellation');
    setVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Form
      </Button>
      <Modal
        title="Form Submission"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
        >
          <Form.Item label="Name">
            <Input />
          </Form.Item>
          <Form.Item label="Age">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

5. Handling Form Submission

In practical applications, it is common to retrieve and process form data when the user clicks the "OK" button. We can achieve this using the onFinish method of the Form component:

javascript
const [form] = Form.useForm();

const handleOk = () => {
  form
    .validateFields()
    .then(values => {
      console.log('Form data: ', values);
      setVisible(false);
    })
    .catch(info => {
      console.log('Form validation failed:', info);
    });
};

return (
  <Modal
    title="Form Submission"
    visible={visible}
    onOk={form.submit}
    onCancel={handleCancel}
  >
    <Form
      form={form}
      onFinish={handleOk}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 14 }}
      layout="horizontal"
    >
      <Form.Item
        name="name"
        label="Name"
        rules={[{ required: true, message: 'Please enter name' }]}" 
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="age"
        label="Age"
        rules={[{ required: true, message: 'Please enter age' }]}" 
      >
        <Input />
      </Form.Item>
    </Form>
  </Modal>
);

6. Summary

By using Ant Design's Modal and Form components, we can easily create and manage forms within modal dialogs. By leveraging form validation and submission handling, we can ensure that user input data is valid and complete, thereby enhancing the application's user experience and data quality.