Да, подтвердите, что требуется одно из двух полей (одно из них представляет собой массив чисел)

Question

Я использую Formik с Yup и Typescript, и у меня это в качестве начального значения формы ...

const initialValues = {
    title: "",
    overview: "",
    related_items_id: [],
    short_desc: ""
};

А вот моя схема ...

const formSchema = Yup.object().shape({
    title: Yup.string()
        .trim()
        .required("This field is required."),
    overview: Yup.string().required("This field is required."),
    related_items_id: Yup.array()
        .min(1, "Pick at least 1 item")
        .of(Yup.number().required("This field is required.")),
    short_desc: Yup.string().required("This field is required.")
});

Теперь мне нужен либо массив related_items_id, либо short_desc, если один заполнен данными, другой не требуется, и, наоборот, как я могу сделать sh, что-то вроде when в yup?

Вот кодовые окна, которые я создал, чтобы показать ошибку, которую я получаю при попытке использовать when метод Yup ...

https://codesandbox.io/s/formik-yup-required-one-or-the-other-nextjs-gujqv

Answer 1

Этого можно добиться, создав тип, который является взаимозависимым для related_items_id и short_desc

export interface BaseType {
    title: string;
    overview: string;
}

interface RelatedItemsType extends BaseType {
  related_items_id?: Array<any>;
  short_desc?: never;
}

interface ShortDescType extends BaseType {
  related_items_id?: never;
  short_desc?: string;
}

export type InitialValueType = RelatedItemsType | ShortDescType;

, и вы можете использовать его следующим образом:

const initialValues: InitialValueType = {
    title: "",
    overview: "",
    related_items_id: [],
    // short_desc: "" no longer required
};

Для условно устанавливая форму FormSchema, извлеките документы Условно установите обязательное поле (Yup) .

const basicFormSchema = Yup.object().shape(
    {
      title: Yup.string()
        .trim()
        .required("This field is required."),
      overview: Yup.string().required("This field is required."),
      related_items_id: Yup.array().when("short_desc", {
        is: "",
        then: Yup.array()
          .min(1, "Pick at least 1 item")
          .of(Yup.number().required("This field is required.")),
        otherwise: Yup.array()
      }),
      short_desc: Yup.string().when("related_items_id", {
        is: relatedItemsId => relatedItemsId.length === 0,
        then: Yup.string().required("This field is required."),
        otherwise: Yup.string()
      })
    },
    [["related_items_id", "short_desc"]]
  );