Yup when condition inside nested object

user_8618649 0
Viewed 5322

so i have a problem with conditional validation using yup. Basically i want shipping to have required properties when the checkbox is not toggled. I am using yup's when feature and i can't figure out how to reference the sameShippingAsBilling boolean value from that shipping nested object.

When checkbox is false, everything is working fine, errors are shown... But when checkbox is checked, i get this error: "Cannot use 'in' operator to search for 'default' in undefined"

The problem is that the value in is callback is undefined. Is it even possible to access the outer variables in when from those nested objects or not. What is the alternative way to do this?

Here is the sandbox example

const schema = Yup.object({
  sameShippingAsBilling: Yup.bool(),
  billing: Yup.object({
    line1: Yup.string().required(),
    city: Yup.string().required(),
    country: Yup.string().required()
  }),
  shipping: Yup.object({
    line1: Yup.string().when("sameShippingAsBilling", {
      is: !val || val === false,
      then: Yup.string().required(),
    }),
    city: Yup.string().when("sameShippingAsBilling", {
      is: !val || val === false,
      then: Yup.string().required(),
    }),
    country: Yup.string().when("sameShippingAsBilling", {
      is: !val || val === false,
      then: Yup.string().required(),
    })
  })
});

const addrValues = { line1: "", city: "", country: "" };

const formOpts = {
  mode: "onChange",
  reValidateMode: "onChange",
  defaultValues: {
    sameShippingAsBilling: true,
    billing: { ...addrValues },
    shipping: { ...addrValues }
  },
  resolver: yupResolver(schema)
};

export default function CheckoutForm() {
  const methods = useForm(formOpts);
  const { watch } = methods;

  const shippingAsBilling = watch("sameShippingAsBilling");

  const onSubmit = async (data) => {
    console.log(data);
  };

  return (
    <MuiThemeProvider theme={createMuiTheme()}>
      <FormProvider {...methods}>
        <form onSubmit={methods.handleSubmit(onSubmit)} noValidate>
          <pre>errors: {JSON.stringify(methods.errors, null, 2)}</pre>

          <div className="group">
            <FormTextField name="billing.line1" />
            <FormTextField name="billing.city" />
            <FormTextField name="billing.country" />
          </div>

          <div>
            <FormCheckbox name="sameShippingAsBilling" />
          </div>

          {!shippingAsBilling && (
            <div className="group">
              <FormTextField name="shipping.line1" />
              <FormTextField name="shipping.city" />
              <FormTextField name="shipping.country" />
            </div>
          )}

          <div>
            <button type="submit">Pay</button>
          </div>
        </form>
      </FormProvider>
    </MuiThemeProvider>
  );
}
yup react-hook-form reactjs javascript
2 Answers

You can conditionally render the shape of your shipping object dependent on the sameShippingAsBilling value.

Something along these lines:

sameShippingAsBilling: Yup.bool(),
shipping: Yup.object().when("sameShippingAsBilling", {
    is: (sameShippingAsBilling) => !sameShippingAsBilling,
    then: Yup.object().shape({
      line1: Yup.string().required(),
      city: Yup.string().required(),
      country: Yup.string().required(),
    }),
    otherwise: Yup.object().shape({
      line1: Yup.string(),
      city: Yup.string(),
      country: Yup.string(),
    }),
  }),
user_131509020

Hm, i added .nullable().default(null) to shipping and apparently it works. technically still don't have access to boolean true/false, it works because val is undefined and it adds that required condition... For a temp solution it is fine, and i don't have to fiddle with .test() or other strange solutions. And i don't even care at this point when a library that calls it self "dead simple object schema validation", and yet i waste time on these simple things.

user_86186490
Related