How to validate the PnP icon picker using Zod and UseForm?

31 Views Asked by At

I am using the PnP React IconPicker in a form. For the form validation, I am using Zod and UseForm (react hook form). How can I validate the icon picker so the user MUST choose an icon with the icon picker? The icon picker has no "name" attribute so I don't know how to include it in the Zod form validation.

<IconPicker buttonLabel={"Choose an icon..."}
   onSave={(selectedIconName: string) => { 
     setIconName(selectedIconName); 
   }} 
/>

Except the icon picker, I have two other fields: First name and Last name. These two fields have a name property. Here is my existing Zod validations

const zodSchema = z.object({
  firstName: z.string().min(1, { message: "The first name is required" }).default(""),
  lastName: z.string().min(1, { message: "The last name is required" }).default("")
})

Thanks a lot in advance.

0

There are 0 best solutions below