我正在将 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
需要,如果一个填充了数据,另一个不需要并使用 Versa,我如何使用类似 when
的东西来实现这一点是吗?这是我创建的一个代码和框,用于显示我在尝试使用
when
时遇到的错误。是的方法...https://codesandbox.io/s/formik-yup-required-one-or-the-other-nextjs-gujqv
最佳答案
您可以通过在 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,请查看文档 Conditionally Set Required Field (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"]]
);
关于reactjs - 是的,验证需要两个字段之一(其中一个是数字数组),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59783667/