How to remotely submit Atlaskit Form as Container of a modal dialog?

Jira Development
1

I have a page where I have a Modal Dialog inside a big form, and my Modal Dialog is an inner form.

<Form>
    <Modal /> (as a Form)
</Form>

I follow the example here to make my Dialog a form.

The problem is when I click the submit button of the Dialog, the outer form is also getting submit.
So how can I submit the Modal Dialog Form without submitting the outer form?

Thanks

2

An example of working code:

const App = () => {
  let formRef = useRef();

  const remotelySubmitForm = () => {
    const form = document.getElementById('myFormId');

    // HTML5 form validity
    if (!form.checkValidity()) {
      form.reportValidity();
      return;
    }

    /* Dispatch form submit event to continue with Atlaskit Field custom
     * validation and submit if they are all valid */
    formRef.current.dispatchEvent(new Event('submit', { cancelable: true }));
  };

  return (
    <div>
      <Button type="button" onClick={remotelySubmitForm}>
        Submit From Outside
      </Button>
      <Form onSubmit={(data) => console.log(data)}>
        {({ formProps }) => {
          formRef = formProps.ref;
          return (
            <form {...formProps} id="myFormId">
              <Field name="html5" label="HTML5 Validation" isRequired>
                {({ fieldProps }) => <TextField {...fieldProps} />}
              </Field>
            </form>
          );
        }}
      </Form>
    </div>
  );
};