是的，验证两个字段中的任何一个是必需的(其中一个是数字数组)

Question

我正在使用带有 Yup 和 Typescript 的 Formik，我将其作为表单的初始值......

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，如果一个填充了数据，另一个则不需要，反之亦然，我如何使用 yesp 中的when之类的东西来完成呢？

这是我创建的代码沙箱，用于显示我在尝试使用 Yesup 的when方法时遇到的错误......

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，请查看文档有条件地设置必填字段 (是(。

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"]]
);

Answer 2

这是您检查其中至少一个是否完成的方式。

const schema = yup.object().shape({
'fieldOneName': Yup.string()
.when('fieldTwoName', {
is: (fieldTwo) => !fieldTwo || fieldTwo.length === 0,
then: Yup.string()
.required('At least one of the fields is required'),
}),
'fieldTwoName': Yup.string()
.when(codiceFiscale.name, {
is: (fieldOne) => !fieldOne || fieldOne.length === 0,
then: Yup.string().
.required('At least one of the fields is required'),,
})
}, ['fieldOneName', 'fieldTwoName']) // <-- HERE!!!!!!!!

Answer 3

<Formik
initialValues={{
email: '',
mobile: '',
submit: null,
}}
validationSchema = {                                                                                         
Yup.object().shape({                                                                                 
'email': Yup.string()                                                                        
.when('mobile', {                                                    
is: (mobile) => !mobile || mobile.length === 0,                      
then: Yup.string()                                                   
.required('At least one of the fields is required'),                 
}),                                                                  
'mobile': Yup.string()                                                                       
.when('email', {                                                     
is: (email) => !email || email.length === 0,                         
then: Yup.string()
.required('At least one of the fields is required')
})                                                                   
}, ['email', 'mobile'])                                                                              
}                                                                                                        

Answer 4

如果使用when不是严格的要求，我发现使用测试函数更容易做到，因为它更简洁，更容易遵循，并且不需要重复代码或消息

const has = require('lodash.has'); // lodash's submodule
validationSchema = {                                                                                         
Yup.object().shape({                                                                                 
'email': Yup.string(),                                                                  
'mobile': Yup.string(),
})
.test(
'email or mobile',
'email or mobile is required',
(value) => has(value, 'email') || has(value, 'mobile')
);