You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This setup works quite well for labels, placeholders etc. but I'm struggling with errors.
If I design my validation schema for Formik like so:
import * as Yup from "yup"
import { useTranslation } from "react-i18next"
const { t } = useTranslation()
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("form.validation.required")),
})
then the validation is translated correctly, but the translation does not change when switching languages in i18next.
A solution suggested in many other issues I've read about the topic (from the different projects) is to use the i18next t() function in the React output instead. However, for me, this is being handled by formik-antd's Form.Item class.
However, I cannot see any option to pass that t() function to the Form.Item error output without overriding the Form.Item.
Could you advise on how to proceed?
The text was updated successfully, but these errors were encountered:
You might be able to place the schema and the calls to the t function inside a component. To not reintantiate the schema on every render you probabaly want to wrap it in a React.useMemo call.
The memo need to be re-evaluated on every language change. I guess the react-i18next exposes somewhere the current language value in a hook. This value you would need to pass to the memo as a dependency.
So something along these lines:
functionMyComponent(){const{ t, lang }=useTranslation();// not sure how to get lang, it might be somewhere elseconstschema=React.useMemo(()=>{return/* Yup.object().shape.... with t() calls*/,,[lang]);// <-- dependency for useMemo, so that on every change of `lang` the schema gets re-createdreturn<Formik....
}
I agree this would be useful and the solution suggested isn't possible in my case because my validation schema does not return translated messages but rather a serialized object to generate the translated message. I do this because my API needs to be language agnostic, and some form errors are generated there.
I was solving this before using Antd with a custom ErrorMessage component, but with Antd, the error is internal to the FormItem.
Hi,
my setup for forms is:
This setup works quite well for labels, placeholders etc. but I'm struggling with errors.
If I design my validation schema for Formik like so:
then the validation is translated correctly, but the translation does not change when switching languages in i18next.
A solution suggested in many other issues I've read about the topic (from the different projects) is to use the i18next
t()
function in the React output instead. However, for me, this is being handled by formik-antd'sForm.Item
class.However, I cannot see any option to pass that
t()
function to the Form.Item error output without overriding the Form.Item.Could you advise on how to proceed?
The text was updated successfully, but these errors were encountered: