Yup - Output a field value in the error message

Question

I am trying to output the field value in the error messaging doing something like this:

const schema = commonSchema.concat(Yup.object().shape({
  name: Yup
    .string()
    .oneOf(
      [Yup.ref('oldName'), null],
      `Name must match oldName - ${Yup.ref('oldName').getValue()}`
    )
    .required('name'),
}));

This is giving TypeError: Cannot read property 'parent' of undefined. What is the right way to access the field value in an error message?

Answer 1

The trick I use to get the value into error message is to use yup.lazy method.

yup.lazy((value: any) => Schema): Lazy

In your case it would look something like this,

const schema = commonSchema.concat(Yup.object().shape({
  name: Yup.lazy((value) => 
    Yup.string()
    .oneOf(
      [Yup.ref('oldName'), null],
      `Name must match oldName - ${value}`
    )
    .required('name')),
}));