Zod resolver and required fields

[wilson-webdev]

As part of a React app, it's pretty common to have a FormField wrapper for displaying labels, error messages etc. I have paired Zod with React Hook Form via the resolver. Is it possible to dynamically fetch whether a field is required based on the Zod schema?

For example, I have this code sandbox with a FormFeld component, it takes a prop called isRequired which renders a red asterisk if true. Of course, I could pass isRequired "manually", but I would like the schema to drive everything e.g. a small util like isFieldRequired(key) would be great, but I can't find anything in the docs that would help with this.

[brunocentanaro]

Hello! Did you find a solution?

[wilson-webdev]

I did find one option which is using the isOptional() helper, so you can write something like schema.shape.firstName.isOptional(). This only returns true if the prop has .optional() e.g. firstName: z.string().optional().

[RakibulBh]

Need more help on your reply, when rendering the FormItem, do i do it to the field attribute ?

[Armadillidiid]

This fix doesn't scale when your component is used across multiple components, as it would require adding the schema to a context provider. It would be helpful if react-hook-form exposed an isRequired property on ControllerRenderProps.