antd Form inside modal does not submit in reactjs

Question

I am trying to submit a form inside a modal form but the form does not submit and does not show any errors.

I have two forms in component. when the user click on the button it opens upd the modal so the user can submit the button the the second form

const SingleTransfer = () => { const [form] = Form.useForm(); const [modalForm] = Form.useForm(); const [bankLoading, setBankLoading] = useState(false) const [loading, setLoading] = useState(false)

const [open, setOpen] = useState(false);


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

const handleCancel = () => {
    setOpen(false);
};

const handleSubmit = (values) => {
    console.log("values ", values)
}
return (
    <div>

        <Card title="Single Transfer">

            <Form
                form={form}
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                initialValues={{
                    remember: true,
                }}
            >

                {bankLoading && (
                    <Form.Item>

                        <div>
                            Loading banks. Please Wait...
                        </div>
                    </Form.Item>)}
                <Form.Item
                    label="Bank Name"
                    name="bank_code"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your bank name!',
                        },
                    ]}
                >
                    <Select
                        showSearch
                        placeholder="Select a Bank"
                        optionFilterProp="children"
                    />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>


            <Button type="primary" onClick={showModal}>
                Open Modal with customized footer
            </Button>

This is the second form inside the modal.

            <Modal
                form={modalForm}
                forceRender={true}
                getContainer={false}
                open={open}
                title="Pin"
                onOk={form.submit}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        Cancel
                    </Button>,
                    <Button key="submit" type="primary" htmlType='submit' loading={loading} onClick={modalForm.submit}>
                        Submit
                    </Button>
                ]}
            >
                <Form
                    name="basics"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    autoComplete="off"
                    onFinish={handleSubmit}
                >


                    <Form.Item
                        label="Pin"
                        name="pin"
                        rules={[
                            {
                                required: true,
                                message: 'Please enter your Pin!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                    </Form.Item>
                </Form>

            </Modal>
        </Card>
    </div>
)

}

export default SingleTransfer

Answer 1

Move the submit button from the footer array into the Form as the last child, also wrap it with <Form.Item> and remove the onClick prop, like so

<Form>
  ...
  <Form.Item>
    <Button key="submit" type="primary" htmlType='submit' loading={loading}>
      Submit
    </Button>
  <Form.Item>
</Form>

In your code the form is not "familiar" with the submit button, so clicking on it not triggers the submit callback.