Show Submit Errors

On Specific Fields

To show errors on specific fields when submit fails, throw/reject with a ZodError from your onSubmit handler. Any issues on the ZodError will be distributed to your field components by issue path (just like errors thrown by your form schema when parsing).

import { createZodForm } from '@jcoreio/zod-forms'
import z from 'zod'

const form = createZodForm({
  schema: z.object({
    email: z.string(),
  }),
})

function SignUpForm() {
  const { onSubmit } = form.useSubmit({
    onSubmit: async (values) => {
      try {
        await createUser(values)
      } catch (error) {
        if (error.code === 'ALREADY_EXISTS') {
          throw new z.ZodError([
            {
              code: z.ZodIssueCode.custom,
              path: ['email'],
              message: 'Email address already in use',
            },
          ])
        }
      }
    },
  })

  return (
    <form onSubmit={onSubmit}>
      <FormTextField
        label="Email Address"
        type="email"
        field={form.get('email')}
      />
      <button type="submit">Sign Up</button>
    </form>
  )
}

Getting the Overall Error

useFormStatus returns a submitError property that has the Error when submit failed:

import { useFormStatus } from '@jcoreio/zod-forms'

function SubmitStatusBanner() {
  const { submitting, submitFailed, submitSucceeded, submitError } =
    useFormStatus()

  if (submitting) return <LoadingAlert>Submitting...</LoadingAlert>
  if (submitFailed) {
    return (
      <ErrorAlert>
        Submit failed:{' '}
        {submitError instanceof Error
          ? submitError.message
          : String(submitError)}
      </ErrorAlert>
    )
  }
  if (submitSucceeded) {
    return <SuccessAlert>Submit Succeeded!</SuccessAlert>
  }
  return null
}