Compose Dialog with Form

[Shmookoff]

How one would correctly use a Form inside a Dialog?
Correctly, as in Submit button should be placed in DialogFooter.

This would not work, as the submit button is out of scope of the form:

<DialogContent>
  <DialogHeader>
    <DialogTitle>...</DialogTitle>
    <DialogDescription>...</DialogDescription>
  </DialogHeader>
  <Form ... >
    <form ... >
      <FormField ... />
    </form>
  </Form>
  <DialogFooter>
    <Button type="submit">Submit</Button>
  </DialogFooter>
</DialogContent>

This would mess up the stylings

<DialogContent>
  <Form ... >
    <form ... >
      <DialogHeader>
        <DialogTitle>...</DialogTitle>
        <DialogDescription>...</DialogDescription>
      </DialogHeader>
        <FormField ... />
      <DialogFooter>
        <Button type="submit">Submit</Button>
      </DialogFooter>
    </form>
  </Form>
</DialogContent>

This would not work

<Form ...>
  <form ...>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>...</DialogTitle>
        <DialogDescription>...</DialogDescription>
      </DialogHeader>
      <FormField ... />
      <DialogFooter>
        <Button type="submit">Submit</Button>
      </DialogFooter>
    </DialogContent>
  </form>
</Form>

Variations with DialogContent asChild and Form or form crash the application with Error: React.Children.only expected to receive a single React element child.

Any help would be greatly appreciated.

[joleyasarthak]

Did you find any solution?

[sadeghbarati]

Use form attribute on <button> or <Button>

<Form>
  <form id="uniqueFormId">
      ...
  </form>
</Form />

<button form="uniqueFormId">submit outside of the form</button>

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
• https://stackblitz.com/edit/vitejs-vite-hg9fki (button outside of the form)