Antd表单远程提交

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

Answer 3

write a custom function like this:

function handleSubmit(){
  form.validateFields().then((values) => {
    // do something with values
  })
}

and call it from Button onClick. so you don't need Form onFinish props.

Answer 4

sorry i was searching and see this old question.

as in the comment you should use const [form] = Form.useForm();

that's a lot of function you can use one of them is submit .

form.submit();

you can refer to document and search for useform:

https://ant.design/components/form/