Does the Yup scheme lose context with the right field?

user_16520425 0
Viewed 283
    currentPrescriptionMedsQuestion: yup.string().required('Required'), //----- need context value
    currentNonPrescriptionMedsQuestion: yup.string().required('Required'),
    currentPrescriptionMeds: yup.array(yup.object({
        name: yup.string().when('currentPrescriptionMedsQuestion', {  
            is: (val: string) => val === 'Yes',        //----- val is undefined
            then: yup.string().required('Required'),
            otherwise: yup.string().notRequired()
        }).default(''),
        frequency: yup.string().when('currentPrescriptionMedsQuestion', {
            is: (val: string) => val === 'Yes',
            then: yup.string().required('Required'),
            otherwise: yup.string().notRequired()
        }).default(''),
        otherFrequency: yup.string().when('frequency', {
            is: (val: string) => val === 'Other',
            then: yup.string().default('').required('Required'),
            otherwise: yup.string().notRequired()
        }).default(''),
        dose: yup.string().when('currentPrescriptionMedsQuestion', {
            is: (val: string) => val === 'Yes',
            then: yup.string().default('').required('Required'),
            otherwise: yup.string().notRequired()
        }).default('')
    })),

I'm trying to get the value I need, but when I try to log it and bind to it, I get undefined How to get a specific val inside an array with an object?

yup formik reactjs javascript
1 Answers

The issue occurs when a nested field try to access the value of an ancestor field and it has already been reported here, for your case a solution is to move the .when to the parent field currentPrescriptionMeds and you'll be able to use the value of currentPrescriptionMedsQuestion to return the correct schema:

    currentPrescriptionMedsQuestion: yup.string().required("Required"), //----- need context value
    currentNonPrescriptionMedsQuestion: yup.string().required("Required"),
    currentPrescriptionMeds: yup.array()
      .when(
        "currentPrescriptionMedsQuestion",
        (currentPrescriptionMedsQuestion, schema) => {
          const objSchema = yup.object({
            name: yup.string().default(''),
            frequency: yup.string().default(''),
            otherFrequency: yup
              .string()
              .when("frequency", {
                is: (val) => val === "Other",
                then: yup.string().default("").required("Required"),
                otherwise: yup.string().notRequired()
              })
              .default(""),
            dose: yup.string().default('')
          });

          console.log("currentPrescriptionMedsQuestion:", currentPrescriptionMedsQuestion);

          if (currentPrescriptionMedsQuestion === "Yes") {
            // objSchema.fields.name.withMutation(schema => schema.required());
            yup.reach(objSchema, "name")
              .withMutation((schema) => schema.required());
            yup.reach(objSchema, "frequency")
              .withMutation((schema) => schema.required());
            yup.reach(objSchema, "dose")
              .withMutation((schema) => schema.required());
          }

          return yup.array(objSchema);
        }
      )

Working example:

Edit interesting-boyd-y4swu

user_111297510
Related