'Does the Yup scheme lose context with the right field?
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?
Solution 1:[1]
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:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Fraction |
