Antd form remote submit

Question

I want to trigger the submit button outside the antd form

Here is my code

<Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >

     <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
    
    <Form.Item {...tailLayout}>
           // Submit button here works well
          </Form.Item>
</Form>

I want this outside form tag, please suggest

 <Button type="primary" htmlType="submit">
     Submit
 </Button>

Answer 1

You can try this way:

 const [form] = Form.useForm();

  const handleFinish = (values) => {
    console.log("values: ", values);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <MyForm form={form} onFinish={handleFinish} />
      <Button onClick={() => form.submit()}>Submit</Button>
    </div>
  );

export const MyForm = ({ form, onFinish }) => {
  return (
    <Form
      form={form}
      onFinish={onFinish}
      initialValues={{ username: "John Doe" }}
    >
      <Form.Item name="username">
        <Input />
      </Form.Item>
    </Form>
  );
};

Answer 2

If the form and the button are not in the same component then it is hard to create same reference for the form in 2 different place. But I found an other easy way:

<Form id="myForm">...</>
...
<Button form="myForm" key="submit" htmlType="submit">
  Submit
</Button>

This is the answer from this issue