Form

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldControl,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"

export default function FormDemo() {
  const [loading, setLoading] = React.useState(false)
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    setLoading(true)
    await new Promise((r) => setTimeout(r, 800))
    setLoading(false)
    alert(`Email: ${formData.get("email") || ""}`)
  }

  return (
    <Form onSubmit={onSubmit} className="max-w-64">
      <Field>
        <FieldLabel>Email</FieldLabel>
        <FieldControl
          name="email"
          type="email"
          placeholder="you@example.com"
          disabled={loading}
          required
        />
        <FieldError>Please enter a valid email.</FieldError>
      </Field>
      <Button type="submit" disabled={loading}>
        Submit
      </Button>
    </Form>
  )
}

"use client"

import * as React from "react"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldControl,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"

const schema = z.object({
  name: z.string().min(1, { message: "Please enter a name." }),
  age: z.coerce
    .number({ message: "Please enter a number." })
    .positive({ message: "Number must be positive." }),
})

type Errors = Record<string, string | string[]>

async function submitForm(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()

  const formData = new FormData(event.currentTarget)
  const result = schema.safeParse(Object.fromEntries(formData as any))

  if (!result.success) {
    const { fieldErrors } = z.flattenError(result.error)
    return { errors: fieldErrors as Errors }
  }

  return {
    errors: {} as Errors,
  }
}

export default function FormZodDemo() {
  const [loading, setLoading] = React.useState(false)
  const [errors, setErrors] = React.useState<Errors>({})
  const handleClearErrors = (next: Errors) => setErrors(next)

  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    const formEl = event.currentTarget
    setLoading(true)
    const response = await submitForm(event)
    await new Promise((r) => setTimeout(r, 800))
    setErrors(response.errors)
    setLoading(false)
    if (Object.keys(response.errors).length === 0) {
      const formData = new FormData(formEl)
      alert(
        `Name: ${String(formData.get("name") || "")}\nAge: ${String(
          formData.get("age") || ""
        )}`
      )
    }
  }

  return (
    <Form
      className="max-w-64"
      errors={errors}
      onClearErrors={handleClearErrors}
      onSubmit={onSubmit}
    >
      <Field name="name">
        <FieldLabel>Name</FieldLabel>
        <FieldControl placeholder="Enter name" disabled={loading} />
        <FieldError />
      </Field>
      <Field name="age">
        <FieldLabel>Age</FieldLabel>
        <FieldControl placeholder="Enter age" disabled={loading} />
        <FieldError />
      </Field>
      <Button type="submit" disabled={loading}>
        Submit
      </Button>
    </Form>
  )
}