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>

Gawky

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>
  );
};

Tripartition

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

Klemm

this works only for an uncontrolled form, the answer above is the correct one :) – Rosenstein

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.

Unbiased

how can I create reference for the form – Gawky

in antd v4 use this: const [form] = Form.useForm(); – Unbiased

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/

Cohla

Answer 5

Fortunately antd Button component has great support for fixing this issue

Component 1
<Form name="form-name">
...
</Form>

component 2

<Button htmlType="submit" form="form-name">Submit</Submit>
<Button htmlType="reset" form="form-name">Reset</Submit>

We can use the id or name which is provided in antd form and use its button anywhere or outside of the form in the project

Girl