如何通过解析Zod判断表单字段是否为必填项？

想要通过Zod判断表单字段是否为必填项，将这个布尔值传递给input组件的required属性（例如 <input required={/* Zod判断结果 */} />），主要用于实现样式需求，比如给必填字段添加*标记。现有代码示例如下：

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>
  );
};

解决方案 #

Zod 提供了直接访问字段元信息的方法，可以通过schema.shape[字段名]获取对应字段的 schema 定义，再利用isOptional()方法判断是否为可选字段，反向推导必填状态。

1. 编写字段必填判断工具函数

添加一个简单的函数，传入 schema 和字段名，返回该字段是否必填：

const isFieldRequired = <T extends z.ZodObject<any>>(schema: T, fieldName: keyof T['shape']): boolean => {
  const fieldSchema = schema.shape[fieldName];
  // 可选字段返回false，必填字段返回true
  return !fieldSchema.isOptional();
};

2. 在组件中应用该函数

修改原组件代码，使用工具函数判断必填状态，并传递给required属性，同时可以用来渲染必填标记：

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

  // 判断字段是否必填
  const isFieldRequired = (fieldName: keyof typeof schema.shape) => {
    return !schema.shape[fieldName].isOptional();
  };

  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}>
      <div>
        <label>姓名 {isFieldRequired('name') && '*'}</label>
        <input
          {...register('name', {
            required: isFieldRequired('name'),
          })}
        />
        {errors?.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label>地址 {isFieldRequired('address') && '*'}</label>
        <input 
          {...register('address', {
            required: isFieldRequired('address'),
          })}
        />
      </div>

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

3. 处理nullable字段的情况

如果字段使用z.string().nullable()而不是optional()，isOptional()会返回false。如果需要将nullable字段也视为非必填，可以修改工具函数：

const isFieldRequired = (fieldName: keyof typeof schema.shape) => {
  const fieldSchema = schema.shape[fieldName];
  // 同时判断是否为可选或可空
  return !(fieldSchema.isOptional() || fieldSchema.isNullable());
};

内容的提问来源于stack exchange，提问作者Mark Nunes