我正在使用yup
模块来验证我的表单。我想访问父项以测试值。
我的架构:
enabled: yup.boolean(),
contactDetail: yup.object().shape({
phoneNumber1: yup.string().nullable(),
phoneNumber2: yup.string().nullable(),
email: yup.string().test('email', 'test', async function() {
// test enabled value
})
}),
方法when
可以在同一级别访问,而不能在父级别访问。
有人知道吗?
答案 0 :(得分:2)
我遇到了类似的问题。我成功地使用了此练习。
想法:将整个表单数据作为上下文传递到架构,并使用
访问任何表单值 this.options.context
const schema = yup.object().shape({
enabled: yup.boolean(),
contactDetail: yup.object().shape({
phoneNumber1: yup.string().nullable(),
phoneNumber2: yup.string().nullable(),
email: yup.string().test('email', 'test', async function () {
// this.options.context.enabled
}),
}),
});
传递上下文
没有Formik
在验证时发送表单数据作为上下文
schema.validateSync(data, {context: form_data})
使用Formik
使用 validate 代替 validationSchema
在 validateYupSchema 中将您的 Form数据作为第4个参数传递,该参数代表上下文,以后可以在模式中访问。
在 validateYupSchema 中将您的 schema 作为第二个参数传递。
<Formik
validate={(value) => {
try {
validateYupSchema(value, schema, true, value);
} catch (err) {
return yupToFormErrors(err); //for rendering validation errors
}
return {};
}}
onSubmit={} />
答案 1 :(得分:0)
您可以使用https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema中提供的测试方法。 像下面的示例一样,您可以使用this.parent访问test()中的一级父级详细信息。
amount: Yup.string().test('amount-test3', 'amount is required', function (value) {
const { description } = this.parent;
return !(!!description && !Number(value));
})