如何解析 Zod 来识别字段是否为必填字段？

Question

我想知道是否可以使用 Zod 来确定何时需要字段，以便我可以将此布尔值传递给输入，例如<input required={/* Use Zod to determine this value */} />。我问的主要原因是出于样式目的，例如*在需要该字段时显示。

const Component = () => {
  const schema = z.object({
    name: z.string(),
    address: z.string().optional(),
  });

  type FormValues = z.infer<typeof schema>;

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      name: '',
      address: undefined,
    },
    resolver: zodResolver(schema),
  });

  const onSubmit = handleSubmit((data) => console.log(data));

  return (
    <form onSubmit={onSubmit}>
      <input
        {...register('name', {
          required: /* Use Zod to determine this value */,
        })}
      />
      {errors?.name && <p>{errors.name.message}</p>}

      <input {...register('address'{
          required: /* Use Zod to determine this value */,
        })}
      />

      <input type="submit" />
    </form>
  );
};

Answer 1

一种选择是仅检查架构是否为instanceof z.ZodOptional. 例如，

const schema = z.number().optional();
// ...

<input required={!(schema instanceof z.ZodOptional)} />

在您的情况下，您正在使用z.object您的schema，因此您可以查看该shape字段，例如：

<input required={!(schema.shape.name instanceof z.ZodOptional)} />

这是利用.optional()将内部模式包装在ZodOptional实例中的事实。如果您有进一步的改进，您最终可能会得到一个ZodEffect内部可选的（或其他东西）。在不深入处理所有类型的情况下，似乎没有第一方支持反映字段的类型，但如果您知道它不会是ZodEffect.