How to make a schema from dynamic and static fields

[mr-scrpt]

Hi everyone. I have a form that creates a product for an online store. The product has certain fields, such as - title, description, photo. There is also a field that assigns the product to a certain category, and depending on which category the product is assigned to, the product has additional, dynamic fields based on options that come from the server. For example, if I select category 1 in the form, the product will have an option for color where I can select a specific color, and if I select category 2, the form should have a size field where I can select a size. Here is how it looks like in the code
Schema(these are the fields that the product always has)

export const productFormSchema = z.object({
  name: z
    .string()
    .min(3)
    .max(30)
    .transform((name) => name.trim()),
  description: z.string(),
  about: z.string(),
  img: z.array(z.string()),
  categoryList: z.array(
    z.object({
      id: z.string(),
    }),
  ),
});

export type ProductFormValues = z.infer<typeof productFormSchema>;

Here is the base component of the form

const getDefaultValues = (product?: ProductRelation) => ({
  name: product?.name ?? "",
  description: product?.description ?? "",
  about: product?.about ?? "",
  img: product?.img ?? [],
  categoryList: product?.categoryList ?? [],
});

export const ProductForm: FC<ProductFormProps> = (props) => {
  const {
    product,
    handleSubmit: onSubmit,
    submitText,
    isPending,
    categorySelectOptionList,
    categotySelectOptionListActive,
    optionSelectOptionList,
    handleCategorySelectOption,
  } = props;

  const form = useForm<ProductFormValues>({
    resolver: zodResolver(productFormSchema),
    defaultValues: getDefaultValues(product),
  });

  useEffect(() => {
    form.reset(getDefaultValues(product));
  }, [product, form, optionSelectOptionList]);

  const handleSubmit = form.handleSubmit(async (data) => {
    onSubmit?.(data);
  });

  const handleDeleteimg = (path: string) => {
    const list = form.getValues("img");
    const result = list.filter((item) => item !== path);
    form.setValue("img", result);
  };

  const isPendingAppearance = useAppearanceDelay(isPending);

  const handleSelect = useCallback((value: MultiSelectOptionItem[]) => {
    form.setValue("categoryList", handleCategorySelectOption(value));
  }, []);

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit} className="space-y-8">
        <FormField
          control={form.control}
          name="categoryList"
          render={({ field }) => {
            return (
              <FormItem>
                <FormLabel>Category list</FormLabel>
                <FormControl>
                  <MultiSelect
                    optionList={categorySelectOptionList}
                    optionActiveList={categotySelectOptionListActive}
                    onSelected={handleSelect}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            );
          }}
        />
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter product name..." {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Description</FormLabel>
              <FormControl>
                <Input placeholder="Enter product description..." {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="about"
          render={({ field }) => (
            <FormItem>
              <FormLabel>About</FormLabel>
              <FormControl>
                <Textarea placeholder="Enter product about..." {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="img"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Avatar</FormLabel>
              <FormControl>
                <ImgField
                  value={field.value}
                  onChange={field.onChange}
                  onDelete={handleDeleteimg}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" disabled={isPendingAppearance}>
          {isPendingAppearance && (
            <Spinner
              className="mr-2 h-4 w-4 animate-spin"
              aria-label="Profile updating..."
            />
          )}
          {submitText}
        </Button>
      </form>
    </Form>
  );
};

Now I want to add fields to it based on which categories are selected in categoryList
For this purpose the optionSelectOptionList props come to the form and based on it I add fields to the form, here is a simplified version with only select, but in the actual code there are also multiselect, checkbox and radio

        {optionSelectOptionList &&
          optionSelectOptionList.map((option) => {
            const { datatype } = option;
            if (datatype === OptionDataTypeEnum.SELECT) {
              return (
                <FormField
                  key={option.name}
                  control={form.control}
                  name={option.name}
                  render={({ field }) => {
                    console.log("name", option.name);
                    return (
                      <FormItem>
                        <FormLabel>{option.name}</FormLabel>
                        <Select onValueChange={field.onChange}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="placeholder" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {option.optionList.map((row) => (
                              <SelectItem key={row.value} value={row.value}>
                                {row.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                     
                        <FormMessage />
                      </FormItem>
                    );
                  }}
                />
              );
            }
          })}

But the problem is that my original schema doesn't know anything about dynamic fields and I don't understand how to implement what I described. Here is an example of how optionSelectOptionList looks like

[
    {
        "id": "option_eeesddfew789855",
        "name": "New",
        "datatype": "radio",
        "optionList": [
            {
                "value": "optionItem_77da558waew77YES",
                "label": "yes",
                "active": false
            },
            {
                "value": "optionItem_ew5da558waew22NO",
                "label": "no",
                "active": false
            }
        ]
    },
    {
        "id": "option_585fsddfew7898dd",
        "name": "Size",
        "datatype": "select",
        "optionList": [
            {
                "value": "optionItem_58ddtwaew7897dfeXS",
                "label": "XS",
                "active": false
            },
            {
                "value": "optionItem_d33ddtwaew68deS",
                "label": "S",
                "active": false
            },
            {
                "value": "optionItem_M68ddtwaew65687M",
                "label": "M",
                "active": false
            },
            {
                "value": "optionItem_L58ddtwaew65622L",
                "label": "L",
                "active": false
            },
            {
                "value": "optionItem_XL33ddtwaew65dd2eeXL",
                "label": "XL",
                "active": false
            }
        ]
    },
    {
        "id": "option_11fsddfew7898186",
        "name": "Color",
        "datatype": "mult",
        "optionList": [
            {
                "value": "optionItem_8fsddfew7898d857",
                "label": "Red",
                "active": true
            },
            {
                "value": "optionItem_d555fsddfew78981fe",
                "label": "Blue",
                "active": false
            },
            {
                "value": "optionItem_rs5fsd55846fptes",
                "label": "Yellow",
                "active": false
            }
        ]
    }
]

[JacobWeisenburger]

Perhaps this would help:
https://github.com/colinhacks/zod?tab=readme-ov-file#discriminated-unions

[mr-scrpt]

Perhaps this would help: https://github.com/colinhacks/zod?tab=readme-ov-file#discriminated-unions

Thank you for your response. But I still don't see how it can help my situation. I have a strictly defined scheme

export const productFormSchema = z.object({
  name: z
    .string()
    .min(3)
    .max(30)
    .transform((name) => name.trim()),
  description: z.string(),
  about: z.string(),
  img: z.array(z.string()),
  categoryList: z.array(
    z.object({
      id: z.string(),
    }),
  ),
});

export type ProductFormValues = z.infer<typeof productFormSchema>;

But a props can be passed to a form component, for example this one optionSelectOptionList

[
    {
        "id": "option_eeesddfew789855",
        "name": "New",
        "datatype": "radio",
        "optionList": [
            {
                "value": "optionItem_77da558waew77YES",
                "label": "yes",
                "active": false
            },
            {
                "value": "optionItem_ew5da558waew22NO",
                "label": "no",
                "active": false
            }
        ]
    },
    {
        "id": "option_585fsddfew7898dd",
        "name": "Size",
        "datatype": "select",
        "optionList": [
            {
                "value": "optionItem_58ddtwaew7897dfeXS",
                "label": "XS",
                "active": false
            },
            {
                "value": "optionItem_d33ddtwaew68deS",
                "label": "S",
                "active": false
            },
            {
                "value": "optionItem_M68ddtwaew65687M",
                "label": "M",
                "active": false
            },
            {
                "value": "optionItem_L58ddtwaew65622L",
                "label": "L",
                "active": false
            },
            {
                "value": "optionItem_XL33ddtwaew65dd2eeXL",
                "label": "XL",
                "active": false
            }
        ]
    },
    {
        "id": "option_11fsddfew7898186",
        "name": "Color",
        "datatype": "mult",
        "optionList": [
            {
                "value": "optionItem_8fsddfew7898d857",
                "label": "Red",
                "active": true
            },
            {
                "value": "optionItem_d555fsddfew78981fe",
                "label": "Blue",
                "active": false
            },
            {
                "value": "optionItem_rs5fsd55846fptes",
                "label": "Yellow",
                "active": false
            }
        ]
    }
]

In that case, I need to generate a new schema, something like this

export const productFormSchema = z.object({
  name: z
    .string()
    .min(3)
    .max(30)
    .transform((name) => name.trim()),
  description: z.string(),
  about: z.string(),
  img: z.array(z.string()),
  categoryList: z.array(
    z.object({
      id: z.string(),
    }),
  ),
  New: z.object({
    id: z.string(),
  }),
  Size: z.object({
    id: z.string(),
  }),
  Color: z.array(z.object({ id: z.string() })),
});

That is, fields should be added, based on the object obtained from the props, which fields of the object will be, how many of them will be - it is unknown, only the interface is known

...
 optionSelectOptionList: Array<OptionSelect>;
...
export type OptionSelect = {
  id: string;
  name: string;
  datatype: OptionDataTypeEnum;
  optionList: Array<MultiSelectOptionItem & { active: boolean }>;
};
...
export type MultiSelectOptionItem = Record<"value" | "label", string>;

Maybe I'm trying to solve the problem in the wrong way.
Right now I'm trying something like this

const createSchemaFromDatatype = (datatype: OptionDataTypeEnum) => {
  switch (datatype) {
    case "radio":
    case "select":
      return z.object({
        id: z.string(),
      });
    case "mult":
      return z.array(z.object({ id: z.string() }));
    default:
      return z.object({});
  }
};
  const createSchemaFromOptions = (options: Array<OptionSelect>) => {
    const schemaObject: { [key: string]: z.ZodType<any> } = {};

    options.forEach((option) => {
      schemaObject[option.name] = createSchemaFromDatatype(option.datatype);
    });

    return z.object(schemaObject);
  };

  const optionSchema = createSchemaFromOptions(optionSelectOptionList);

  const combinedSchema = productFormSchema.merge(optionSchema);

  const productFormSchemaWithDynamicOptions = combinedSchema;

  type ProductFormValues = z.infer<typeof productFormSchemaWithDynamicOptions>;

But in the merged schema I get this type and there is nothing about my original fields from the primary schema.

const combinedSchema: z.ZodObject<{
    [x: string]: z.ZodType<any, z.ZodTypeDef, any>;
}, "strip", z.ZodTypeAny, {
    [x: string]: any;
}, {
    [x: string]: any;
}>

I must be doing something wrong, because it looks pretty complicated and I'm still not getting the results I want. Maybe you can advise me how to better realize my task?

[JacobWeisenburger]

I'm not really sure what you are trying to do. Perhaps you could simplify it?

[JacobWeisenburger]

Can you just make the extra properties optional?

const productFormSchema = z.object( {
    name: z.string().min( 3 ).max( 30 ).trim(),
    description: z.string(),
    about: z.string(),
    img: z.string().array(),
    categoryList: z.object( { id: z.string() } ).array(),
    New: z.object( { id: z.string() } ).optional(),
    Size: z.object( { id: z.string() } ).optional(),
    Color: z.object( { id: z.string() } ).array().optional(),
} )

type ProductForm = z.input<typeof productFormSchema>
// type ProductForm = {
//     name: string
//     description: string
//     about: string
//     img: string[]
//     categoryList: { id: string }[]
//     New?: { id: string } | undefined
//     Size?: { id: string } | undefined
//     Color?: { id: string }[] | undefined
// }

If you found my answer satisfactory, please consider supporting me. Even a small amount is greatly appreciated. Thanks friend! 🙏
https://github.com/sponsors/JacobWeisenburger

[mr-scrpt]

Can you just make the extra properties optional?

Hi, thank you for your reply. No, I can't make the fields optional because those fields are unspecified. They are created, deleted, renamed, at one point in time it could be Size, Color, and at another point in time it could be One, Two, Threee, Ololo, AnyFieldName, More, ...., Thousand.

[JacobWeisenburger]

Would you like this issue to remain open as a feature request? Or can I move it to discussions as a Q&A?

[mr-scrpt]

So far, I've solved my problem this way. In a schema that contains fields that are precisely defined, I added the propertyList field

export const productFormSchema = z.object({
  name: z
    .string()
    .min(3)
    .max(30)
    .transform((name) => name.trim()),
  description: z.string(),
  about: z.string(),
  img: z.array(z.string()),
  categoryList: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
    }),
  ),
  propertyList: z.object({}),
});

export type ProductFormValues = z.infer<typeof productFormSchema>;

Next I create a schema for the dynamic fields, based on the data

  const dynamicOptionSchema: Record<string, z.ZodType<any, any>> = {};

  for (const option of propertySelectOptionList) {
    if (option.datatype === "mult" || option.datatype === "checkbox") {
      dynamicOptionSchema[option.name] = z.array(z.string());
    } else {
      dynamicOptionSchema[option.name] = z.string();
    }
  }

And I create a final schema with all the fields in it

  const finalProductFormSchema = productFormSchema.extend({
    propertyList: z.object(dynamicOptionSchema),
  });

  type FinalProductFormValues = z.infer<typeof finalProductFormSchema>;

  const form = useForm<FinalProductFormValues>({
    resolver: zodResolver(finalProductFormSchema),
    defaultValues: getDefaultValues(product, propertySelectObjectActive),
  });

In this case, I get the correct types for the defined fields and can work with the dynamic fields created based on the received data
Here is how the data sent from the form looks like

{
    "name": "First Product",
    "description": "Metadata to first product",
    "about": "About first product text",
    "img": [
        "https://images.examples.com/wp-content/uploads/2018/04/urban-billboard.jpg",
        "https://images.examples.com/wp-content/uploads/2018/04/Station-Billboard-Design-Example.jpg?width=600"
    ],
    "categoryList": [
        {
            "id": "cat_585fsddfew7898few",
            "name": "First Category"
        }
    ],
    "propertyList": {
        "Color": [
            "propertyItem_8fsddfew7898d857",
            "propertyItem_d555fsddfew78981fe"
        ],
        "Size": "propertyItem_M68ddtwaew65687M"
    }
}

[tiguere]

i'm facing a similar issue -> it would be really helpful to see how you render the form components dynamically... i.e , how you updated this part

``

          optionSelectOptionList.map((option) => {
            const { datatype } = option;
            if (datatype === OptionDataTypeEnum.SELECT) {
              return (
                <FormField
                  key={option.name}
                  control={form.control}
                  name={option.name}
                  render={({ field }) => {
                    console.log("name", option.name);
                    return (
                      <FormItem>
                        <FormLabel>{option.name}</FormLabel>
                        <Select onValueChange={field.onChange}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="placeholder" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {option.optionList.map((row) => (
                              <SelectItem key={row.value} value={row.value}>
                                {row.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                     
                        <FormMessage />
                      </FormItem>
                    );
                  }}
                />
              );
            }
          })}```

[sergey-shch]

I ended up with this component for the form, it helps me to write less code each time I need to implement a form:

<Form {...form}>
				<form
					className={cn(
						'grid grid-cols-1 gap-3 sm:grid-cols-2',
						className
					)}
					ref={ref}
					onSubmit={onSubmit}
				>
					{React.Children.map(children, (child: React.ReactNode) => {
						if (!React.isValidElement(child)) {
							return null
						} else if (child.props?.['data-ignore-form']) {
							return <child.type {...child.props} />
						}
						const name: ChildName = child.props?.name || ''

						return (
							<FormField
								control={form.control}
								name={name}
								render={({ field }) => (
									<child.type
										{...child.props}
										{...field}
										disabled={child?.props?.disabled || isSubmitting}
										key={name}
									/>
								)}
							/>
						)
					})}

					..........
				</form>
			</Form>

[sergey-shch]

As you can see above u can put in this form any children and even skip it from registration by adding data-ignore-form prop. Usually I prepare child components by wrapping them in and components by shadcn/ui with labels and messages, but it's not necessary if you need smth simple

[raptoria]

I did this

import { BaseSyntheticEvent, useState, useTransition } from "react";
import { SubmitHandler, useForm } from "react-hook-form";

import { actions, IQuestionnaire } from "@/store";

import { Alert, AlertType } from "@/components/alert";

import { Spinner } from "@/components/spinner";

import { AnimatePresence, motion } from "framer-motion";
import { Button } from "@/components/ui/button";

import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

import {
  DynamicContent,
  getDefaultValues,
  getDynamicSchema,
} from "@/app/auth/register/helpers";

export interface IMessage {
  type: AlertType;
  text: string;
  id: string;
}

export const QuestionForm: React.FC<{ content: Array<IQuestionnaire> }> = ({
  content,
}) => {
  const dynamicSchema = z.object(getDynamicSchema(content));

  type IQuestionForm = z.infer<typeof dynamicSchema> &
    Partial<BaseSyntheticEvent>;

  const {
    handleSubmit,
    trigger,
    control,
    formState: { errors, isValid },
  } = useForm<z.infer<typeof dynamicSchema>>({
    mode: "onBlur",
    resolver: zodResolver(dynamicSchema),
    defaultValues: getDefaultValues(content),
  });

  const [isPending, startTransition] = useTransition();

  const [formError, setFormError] = useState("");

  const submit = handleSubmit((formData) => {
    startTransition(async () => {
      const err = await actions.user.submitQuestionnaire(formData);
      if (err) {
        setFormError(err);
      } else {
        setFormError("");
      }
    });
  });


  return (
    <div className="grid justify-center">
      <form onSubmit={handleSubmit(submit as SubmitHandler<IQuestionForm>)}>
        <div className="grid w-full items-center gap-4">
          {content.map((props) => (
            <DynamicContent
              key={props.type}
              {...props}
              trigger={trigger}
              control={control}
              errors={errors}
            />
          ))}

          <div className="flex flex-col space-y-1.5 mt-5">
            {isPending ? (
              <Spinner />
            ) : (
              <>
                <Button
                  type="submit"
                  variant="accent"
                  size="xl"
                  disabled={!isValid || Object.keys(errors).length !== 0}
                >
                  Submit
                </Button>
              </>
            )}
          </div>

          <div className="h-20 sm:h-28 lg:h-32 pt-3">
            <AnimatePresence>
              {formError && (
                <motion.div
                  key={formError}
                  initial={{ y: 0, opacity: 0 }}
                  animate={{
                    y: 10,
                    opacity: 1,
                  }}
                  transition={{
                    type: "spring",
                    stiffness: 50,
                  }}
                >
                  <Alert message={formError} type={AlertType.Error} />
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </form>
    </div>
  );
};

helpers.tsx

import { DatePicker, lastYearDate } from "@/components/date-picker";
import { FormError } from "@/components/form/form-error";
import { ContentType, IQuestionnaire } from "@/store";
import { Label } from "@radix-ui/react-label";
import { Controller, UseFormProps, UseFormReturn } from "react-hook-form";
import { z } from "zod";

export const getDefaultValues = (content: Array<IQuestionnaire>) => {
  const defaultValues: Record<string, string | undefined> = {};
  content.map(({ title, content, type, options }: IQuestionnaire) => {
    switch (type) {
      case ContentType.Datepicker:
        defaultValues[type] = undefined;
        break;
      default:
        return;
    }
  });
  return defaultValues;
};

export const getDynamicSchema = (content: Array<IQuestionnaire>) => {
  const dynamicObj: Record<string, z.ZodType<any, any>> = {};

  content.map(({ title, content, type, options }: IQuestionnaire) => {
    switch (type) {
      case ContentType.Datepicker:
        dynamicObj[type] = z
          .date()
          .min(new Date("1920-01-01"), {
            message: "Please choose an appropriate date",
          })
          .max(new Date(lastYearDate), {
            message: "You must be at least 1 year old",
          });
        break;
      default:
        return;
    }
  });
  return dynamicObj;
};

export const DynamicContent = ({
  title,
  type,
  trigger,
  control,
  errors,
}: IQuestionnaire & Partial<UseFormReturn & UseFormProps>) => {
  switch (type) {
    case ContentType.Datepicker:
      return (
        <Controller
          name={type}
          control={control}
          render={({ field }) => (
            <div className="flex flex-col space-y-3">
              <Label htmlFor={type}>
                {title}
                <FormError
                  error={errors && (errors[type]?.message as string)}
                />
              </Label>
              <DatePicker
                {...field}
                onChange={(e) => {
                  field.onChange(e);
                  if (trigger) {
                    trigger(type);
                  }
                }}
                onBlur={() => {
                  if (trigger) {
                    trigger(type);
                  }
                }}
              />
            </div>
          )}
        />
      );
    default:
      return null;
  }
};