Should the 'required' prop on a field be set according to the zod schema? If so, how to do it?

[DKeen0123]

In a remix app, with this schema as an example:

const FormSchema = z.object({
  organisationName: z.string().min(1),
  organisationRole: z.string(),
  organisationWebsite: z.string().optional(),
})

and this on the frontend:

 const lastResult = useActionData<typeof action>()
const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: FormSchema })
    },
    shouldValidate: 'onBlur',
  })

I would expect fields.organisationName.required to be true, but it's actually undefined. Is there a way to get this to be set to true based on the schema?

The reason this is useful: I want my input label to add (optional) to the end of the label if required = false | undefined. But right now, required seems to always be undefined, and it seems silly to have to set this manually if conform is controlling my form

[DKeen0123]

Aha, I figured it out:

you need to set the constraint on the useForm hook.

for me, that looked like:

  const [form, fields] = useForm({
    // Sync the result of last submission
    lastResult,
    constraint: getZodConstraint(FormSchema),
    // Reuse the validation logic on the client
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: FormSchema })
    },

    // Validate the form on blur event triggered
    shouldValidate: 'onBlur',
  })

Hope this helps anyone else curious about this!

I'm also curious as to why this is an option vs just the default behaviour? I can't imagine not wanting this behaviour 🤔

[andrewcheongprestige]

This didn't work for me. I'm using Remix and Yup. Am I doing something wrong here? fields.fundingTypeId.required is undefined.

  const schema = yup.object({
    fundingTypeId: yup.number().label("Funding type").required()
  });

  const [form, fields] = useForm({
    constraint: getYupConstraint(schema),
    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
    lastResult,
    onValidate({ formData }) {
      return parseWithYup(formData, { schema: schema });
    },
  });