Yup schema that should allow null default value, and requires object on submit

[ivomasterche]

Hello, I have react-select in react-hook-form controller, that should have null as default value and is required in the form and on submit should have object{value, label}. Before version 3.1.1 of @hookform/resolvers this was not a problem, because the form inputs had their own type, where the null value is acceptable for the select, and the schema did not have nullable(). But now since the schema is source of truth TS complains for the default values if I don't have nullable, but I cannot use nullable since the select is required and should output object.

Example working with 3.1.0:

const schema = yup.object().shape({category: yup
    .object()
    .shape({
      label: yup.string().required("Tag is required"),
      value: yup.string().required("Tag is required"),
    })
.required()
   });

interface SelectOptionType {
  label: string;
  value: string;
}
interface InputType {
category: SelectOptionType | null;
}

useForm<InputType>({
    resolver: yupResolver(schema),
    defaultValues: {
      category: null,
}})

With Ver. 3.1.1. I cannot use default value null for category, because it should not be nullable in the yup schema, since it is required and should have object for output

[Naddiseo]

You might need to specify that category is nullable and defined:

const schema = yup.object().shape({category: yup
  .object()
  .shape({
    label: yup.string().required("Tag is required"),
    value: yup.string().required("Tag is required"),
  })
  .nullable()
  .defined(),
 });

[ivomasterche]

Hi, thank you for your suggestion. but at least in my case, this allows the form to be submitted without selected value in that category select.

[ivomasterche]

I was able to deal with this using the asegarra suggestion https://github.com/react-hook-form/resolvers/issues/575#issuecomment-1693405121.I just specified the MyInputType here

resolver: yupResolver< InputType>(schema),

[wethinkagile]

404 Not Found

[ivomasterche]

It seems that the original comment was deleted. This is the thread
https://github.com/react-hook-form/resolvers/issues/589

But as I have put in my comment above, I added the Null as a possible value in the yupResolver type and put the type :
resolver: yupResolver< InputType>(schema),

[craigmcc]

I have concluded, from a philosophical viewpoint, that the data types for a form do not have to match the data types for the database fetch that your data came from. Given that these are two completely separate worlds, this makes sense to me. It may or may not in your use case. Besides the particular use case discussed here, this has given me complete freedom to transform the shape of what I get back from the database into what the form needs, and vice versa.

For nullable string fields, for example, this leads me to the following behaviors in my RHF form components:

• For string fields that are nullable in the database, when calculating defaultValues, translate database values null -> ""
• For string fields that are nullable in the database, when onSubmit() decides what to actually send, translate form values "" -> null.

There might be other complexities with things like optional checkboxes (which I handle in my React component UI), but this basic idea has saved me all sorts of angst about trying to map between what the HTML standard "input" component does and what databases do.

[fabien-thebaud-ariadnext]

I had a similar Issue, I was able to solve it with this kind of validation:

const schema = yup.object({
  book: yup
    .object({
      author: yup.string(),
      title: yup.string().required(),
    })
    .nullable()
    .notOneOf([null]),
});

[YuriiLunovSendient]

Saved my day, thank you!

[dilipthakre]

Thanks @fabien-thebaud-ariadnext , been struggling for this from last 2 hours.

[rdaniel0]

Encountered this same issue and you've saved me some hours.
I had a much similar issue:

1. null values in defaultValue should be allowed (either loading new form or editing existing form)
2. on submit, null value should not pass validation with custom error message

My schema looks similarly like this

const schema = yup.object({
  book: yup
  .mixed<Book>()  // Typed to this object since that's what could possibly come into default value
  .defined() // no undefined
  .nullable() // allow null
  .notOneOf([null], "This is required"), // validate not null, with custom error message
  ...other values with yup schemas
});