Next.js Discord

Discord Forum

How can I wrap shadcn's Dialog in react-hook-form

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
TonkineseOP
Hey guys, I'm trying to create a modal with a form in it (specifically using shadcn's Dialog wrapped with shadcn's Form and <form>, however my <Button type="submit" /> is having no effect when I click it, any ideas?

const formSchema = z.object({
  name: z.string().min(2, {
    message: "Foo name must be at least 2 characters.",
  }),
  description: z.string().min(2, {
    message: "",
  }),
});

export function NewFooModal() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
    },
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (...)
}

6 Replies

TonkineseOP
return (
  <Form {...form}>
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <Dialog>
        <DialogTrigger asChild>
          <Button>
            Click me
          </Button>
        </DialogTrigger>
        <DialogContent>
          <VisuallyHidden.Root>
            <DialogTitle>New Foo</DialogTitle>
          </VisuallyHidden.Root>
          <DialogHeader>
            <div >
              <div>
                <div>
                  <ComboboxForm />
                </div>
                <ChevronRight size={14} />
                <div>New Foo</div>
              </div>
              <div></div>
            </div>
          </DialogHeader>
          <div>
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Textarea
                      placeholder="Add description..."
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div>
              <FormButtons />
            </div>
          </div>
          <DialogFooter>
            <Button type="submit">
              Create Foo
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </form>
  </Form>
)
TonkineseOP
brilliant, thanks
@@ts-ignore `Form` should be child of `<DialogContent>`
TonkineseOP
er quick question, i'm getting a In HTML, <form> cannot be a descendant of <form>. error because of the Comboboxform inside the shadcn form, is there a way to get that to work?
TonkineseOP
easy, thanks