英文:
Yup error this must be a `object` type, but the final value was: `null`
问题
I have a validation schema defined using Yup as below:
export const mySchema = {
'add-record': yup.object().shape({
'myId': yup
.string()
.nullable()
.required()
})
}
On click of some button, I invoke the validation as below:
await mySchema['add-record'].validate(props.formRef.current.getValues("myId"), { context: { other: 4 } });
props.formRef.current.getValues("myId")
is actually mapped to a textbox on the UI, and as soon as I enter "123456789" and invoke the validation, I get an error saying:
"this must be an object
type, but the final value was: null
(cast from the value "123456789"
)."
Not sure why it is saying the final value is: null
.
UPDATED:
I have a server API call in my main component, and based on that API response, I want to display the server error message via Yup's context.createError
. So I want to pass isMyIdServiceError
and MyIdServiceErrorMsg
and display the error message in MyIdServiceErrorMsg
if isMyIdServiceError
is true.
I am trying the below, but it does not work. Please suggest.
'myId': yup
.string()
.nullable()
.required()
.when(
['$isMyIdServiceError', '$MyIdServiceErrorMsg'],
([isMyIdServiceError, MyIdServiceErrorMsg], schema) => {
if (isMyIdServiceError === true) {
context.createError({
message: MyIdServiceErrorMsg
});
}
}
),
Trying with test
also throws ValidationError
in the console:
'myId': yup
.string()
.nullable()
.required()
.test(
'api-error',
'${$MyIdServiceErrorMsg}',
async function(value, ctx) {
const {
ismyIdServiceError,
myIdServiceErrorMsg
} = this.options.context;
if (ismyIdServiceError) {
return ctx.createError({ path: 'myId', message: myIdServiceErrorMsg });
}
return true;
}
)
(Note: I've corrected the variable names to match your code.)
英文:
I have a validation schema defined using Yup as below
export const mySchema = {
['add-record']: yup.object().shape({
'myId': yup
.string()
.nullable()
.required()
})
}
On click of some button, I invoke the validation as below;
await mySchema['add-record'].validate(props.formRef.current.getValues("myId"), { context: { other: 4 } });
props.formRef.current.getValues("myId") is actually mapped to a textbox on the UI and as soon as I enter 123456789 and invoke the validation, I get an error saying;
this must be a object
type, but the final value was: null
(cast from the value "123456789"
).
Not sure why it is saying the final value is: null
UPDATED
I have a server API call in my main component and based on that API response, I want to display the server error message via Yup's context.createError...So I want to pass isMyIdServiceError and MyIdServiceErrorMsg and display the error message in MyIdServiceErrorMsg, if isMyIdServiceError is true
I am trying the below, but it does not work. Please suggest.
'myId': yup
.string()
.nullable()
.required()
.when(
['$isMyIdServiceError', '$MyIdServiceErrorMsg'],
([isMyIdServiceError, MyIdServiceErrorMsg], schema) => {
if (isMyIdServiceError === true) {
context.createError({
message: MyIdServiceErrorMsg
});
}
}
),
Trying with test also throws ValidatonError in the console
'myId': yup
.string()
.nullable()
.required()
.test(
'api-error',
'${$MyIdServiceErrorMsg}',
async function(value, ctx) {
const {
ismyIdServiceError,
myIdServiceErrorMsg
} = this.options.context;
if (ismyIdServiceError) {
return ctx.createError({ path: 'myId', message: myIdServiceErrorMsg });
}
return true;
}
)
答案1
得分: 1
你看到的错误是因为 mySchema['add-record'] 期望一个对象,但你直接传递了一个字符串值。
在你的模式定义中,你已经将 mySchema['add-record'] 定义为一个具有 'myId' 属性的对象,所以当你调用 validate 时,它期望你传递一个具有相同结构的对象。
你应该使用 getValues() 方法,不带参数,以将整个表单值作为对象获取,然后使用你的模式验证该对象。
尝试这样做:
const formValues = props.formRef.current.getValues();
try {
await mySchema['add-record'].validate(formValues, { context: { other: 4 } });
console.log('验证通过!');
} catch (error) {
console.error('验证失败,错误信息:', error);
}
英文:
The error you're seeing is because mySchema['add-record'] is expecting an object, but you're passing a string value directly.
In your schema definition, you've defined mySchema['add-record'] as an object with a property of 'myId', so when you call validate, it expects you to pass in an object with the same structure.
You should use the getValues() method without argument to get the entire form values as an object, then validate that object with your schema.
try this :
const formValues = props.formRef.current.getValues();
try {
await mySchema['add-record'].validate(formValues, { context: { other:
4 } });
console.log('Validation passed!');
} catch (error) {
console.error('Validation failed with error:', error);
}
答案2
得分: 1
尝试使用以下代码来处理错误:
'myId': yup
.string()
.nullable()
.required()
.test(
'api-error',
'${$MyIdServiceErrorMsg}',
function (value) {
const { isMyIdServiceError, MyIdServiceErrorMsg } = this.options.context;
if (isMyIdServiceError) {
return this.createError({ message: MyIdServiceErrorMsg });
}
return true;
}
)
然后,在调用 validate()
时,您需要像这样传递上下文:
const formValues = { myId: props.formRef.current.getValues("myId") };
const context = { isMyIdServiceError: /* 您的值 */, MyIdServiceErrorMsg: /* 您的值 */ };
try {
await mySchema['add-record'].validate(formValues, { context });
console.log('Validation passed!');
} catch (error) {
console.error('Validation failed with error:', error);
}
请将注释中的 /* 您的值 */
替换为您实际的值。
英文:
try this for the error :
'myId': yup
.string()
.nullable()
.required()
.test(
'api-error',
'${$MyIdServiceErrorMsg}',
function (value) {
const { isMyIdServiceError, MyIdServiceErrorMsg } = this.options.context;
if (isMyIdServiceError) {
return this.createError({ message: MyIdServiceErrorMsg });
}
return true;
}
)
Then, when calling validate(), you'll need to pass in the context like this:
const formValues = { myId: props.formRef.current.getValues("myId") };
const context = { isMyIdServiceError: /* your value */, MyIdServiceErrorMsg: /* your value */ };
try {
await mySchema['add-record'].validate(formValues, { context });
console.log('Validation passed!');
} catch (error) {
console.error('Validation failed with error:', error);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论