Dynamically create a zod schema based on a remote configuration

[SensoryDavide]

Hey there, I've been having more trouble than I thought creating form validation for a dynamic form using zod. The form lives on multiple domains and depending on the domain, a different configuration is fetched from a remote server. It might look like this:

  signupForm: {
    fields: {
      birthdate: {
        enabled: true,
      },
      newsletter: {
        enabled: false,
      }
  }

Based on the enabled property, I want to expand the schema. Initially I thought something like this might work:

  const baseScheme = z.object({
    firstname: z.string({ required_error: "Please enter a first name" }),
    lastname: z.string({ required_error: "Please enter a first name" }),
    email: z
      .string({ required_error: "Please enter an email address" })
      .email({ message: "Invalid email address" }),
  });

  const newsletterSchema = z.object({
    newsletter: z.boolean().optional(),
  });

  let scheme = baseScheme;

  if (config.signupForm.fields.newsletter.enabled) // The config object is fetched from a remote source, so not static
    scheme = scheme.merge(newsletterSchema);

However, the typing for scheme remains the base scheme

let scheme: z.ZodObject<{
    firstname: z.ZodString;
    lastname: z.ZodString;
    email: z.ZodString;
}>

The other way around results in the same type

  let scheme = z.object({}).merge(baseScheme);

  if (config.signupForm.fields.newsletter.enabled)
    scheme = newsletterSchema.merge(scheme);

It seems like either zod or TypeScript can't infer the conditional type from .merge because as soon as I assign it to a new variable, it works:

  let scheme = baseScheme;

  if (config.signupForm.fields.newsletter.enabled) 
    const newScheme = scheme.merge(newsletterSchema);

  const newScheme: z.ZodObject<{
      firstname: z.ZodString;
      lastname: z.ZodString;
      email: z.ZodString;
      newsletter: z.ZodOptional<z.ZodBoolean>;
  }>

Any ideas how I could keep the typesafety? My current approach that kind of works looks like this:

  type FinalFormType = typeof baseScheme &
    Partial<
      typeof newsletterSchema & typeof legalSchema & typeof birthdateSchema
    >;

  return scheme as unknown as FinalFormType;

Which is obviously not ideal and error-prone as you have to manually update the FinalFormType

[babycourageous]

Stumbled onto this looking for the same thing. Curious if you ever found a more ideal solution. Thanks!

I'm currently managing enabled and required in the form itself using the native required field.

[RajeshPandey057]

I am also having a similar issue.
I am getting a list of question from backend with different types like checkbox, radio button, text field which are to be rendered as such.
The length of question array is going to be dynamic and I want to use zod with react-hook-form but doesn't seem possible. Let me know if you have any idea of solution