How to make the error message for oneOf display dropdown labels instead of values
Imagine a dropdown with labels, and values that are some sort of internal id. Say it has data like this:
id1 - A little bit
id2 - Normal amount
id3 - Loads and loadsIn yup, you'd validate that with something like this:
yup.string().oneOf([ 'id1', 'id2', 'id3' ]);But in the error message, I do not want to see:
Field must be one of the following values: id1, id2, id3.These values are not visible to the visitor, and are therefor not useful to them.
Sure I can change the error message in yup.setLocale(), which works beautifully, but in this case the issue is that I don't know how to tell yup to translate values to labels. I would like the message to include the labels, not the values:
Field must be one of the following values: A little bit, Normal amount, Loads and loads.Please note that these labels are not known at the time setLocale is being called to populate error messages. These labels come from an external API and are only known once the corresponding form is getting rendered. On top of that, I'm looking for a generic solution, not a solution that fixes the error messages for only this specific field.
Test case: https://codesandbox.io/s/smoosh-waterfall-r7v6f3?file=/src/index.test.js
Bonus question: in the message function in setLocale, why is values a string, instead of the array of possible values?
Source: jquense/yup