[英]Yup nested schema validation
我正在尝试根据用户选择的 Select 选项有条件地验证 object,问题是我正在呈现货币列表并且尝试使其成为必填字段时遇到巨大困难,因为我必须传入一个空object 开始。
我的代码堆栈是 React、Formik 和 Yup(所有最新版本)。
Object 架构
category: 'A',
details: {
name: '',
price: 0,
stock: 0,
currency: {
label: '',
code: '',
symbol: '',
alpha_2: '',
}
}
是的模式
category: Yup.string().required('You must pick a category'),
details: Yup.object().when('category', {
is: 'A',
then: Yup.object({
label: Yup.string().required(`Select the currency you're retailing in`),
code: Yup.string().required(`Select the currency you're retailing in`),
symbol: Yup.string().required(`Select the currency you're retailing in`),
alpha_2: Yup.string().required(`Select the currency you're retailing in`),
}),
})
使用上面的代码,表单正在通过验证,货币 object 有一个空值列表''
,这是不希望的结果。
您如何进行架构触发器验证?
您没有针对存储label/code/symbol/alpha_2
的details.currency
进行验证。 在schema.details
then
,应该由Yup.object
组成,其中另一个Yup.object
存储在currency
属性中,然后定义您想要的label/code/symbol/alpha_2
。
例子:
const yup = require("yup");
const schema = yup.object({
category: yup.string().required('You must pick a category'),
details: yup.object().when('category', {
is: 'A',
then: yup.object({
currency: yup.object({
label: yup.string().required(`[1] Select the currency you're retailing in`),
code: yup.string().required(`[2] Select the currency you're retailing in`),
symbol: yup.string().required(`[3] Select the currency you're retailing in`),
alpha_2: yup.string().required(`[4] Select the currency you're retailing in`),
})
}),
})
})
let state = {
category: 'A',
details: {
name: '',
price: 0,
stock: 0,
currency: {
label: 'a',
code: 'b',
symbol: 'c',
alpha_2: 'd',
}
}
}
schema.validate(state).then(console.log).catch(err => console.log(err))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.