如何根据两个条件设置 yup 验证？我将 TypeScript 与 Next.js 和 Formik 一起使用

Question

如果此current属性的值等于true并且此endedAt属性的值为null，我想将此endedAt字段设置为必需的。

这是我尝试过的：

validationSchema: Yup.object({
      title: Yup.string()
        .trim()
        .min(1, t('min-length-x', { x: 1 }))
        .max(128, t('max-length-x', { x: 128 }))
        .required(t('required')),
      organizationName: Yup.string()
        .trim()
        .min(1, t('min-length-x', { x: 1 }))
        .max(128, t('max-length-x', { x: 128 }))
        .required(t('required')),
      description: Yup.string()
        .trim()
        .min(0, t('min-length-x', { x: 0 }))
        .max(1024, t('max-length-x', { x: 1024 })),
      endedAt: Yup.date()
        .when(['current', 'endedAt'], {
          is: (!current, endedAt) => {
            return (!current && endedAt === null)
          },
          then: Yup.date().required(t('required')),
        })
    }),

Answer 1

你可以像这样修改你的endedAt。这样它就可以取current的值，lazy只是为了避免循环依赖错误。

 const validationSchema = Yup.object({
title: Yup.string()
  .trim()
  .min(1, t("min-length-x", { x: 1 }))
  .max(128, t("max-length-x", { x: 128 }))
  .required(t("required")),
organizationName: Yup.string()
  .trim()
  .min(1, t("min-length-x", { x: 1 }))
  .max(128, t("max-length-x", { x: 128 }))
  .required(t("required")),
description: Yup.string()
  .trim()
  .min(0, t("min-length-x", { x: 0 }))
  .max(1024, t("max-length-x", { x: 1024 })),
current: Yup.boolean(),
endedAt: Yup.lazy((value) =>
  value && value.current
    ? Yup.date().required(t("required"))
    : Yup.date().nullable().default(null)
)

});

const [formData, setFormData] = useState({ 标题： ””， 机构名称： ””， 描述： ””， 当前：错误， 结束于：空 });