-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Passing translated strings to redux-form field level validation #306
Comments
You can require i18n and use it's
|
So for you code that would mean if i get it right:
|
Hey, tried it out but could not get it to work. My i18n file:
I get like 78 of these errors, seems like some kind of loop:
I also have these import in the same file. Maybe it breaks something?
|
not sure but guessing the warnings come from missing key? Do those show up before the setState warnings? If so that shouldn't be an issue on next reload as the key would been added (saveMissing). Looking at the full code i would move the minValue0 to your render function - so you're sure i18next has loaded the translations - else calling t upfront will result in not existing value - or even set to wrong language (if changing that programmatically):
Beside that you leaked your API key - i highly recommend to generate a new one in your project settings and remove the old one - else people could use that to add content on your behalf. |
Oops. Generated a new one. Moving minValue0 to render will not work, thats the whole problem. Redux-form is not designed that way for some reason. That is why I need to translate the key outside the component. On another note, how should the translate work in production if the API key cannot be exposed. My react project is client side? |
Strange technically there is no difference between:
and
but you might use what is minValue returning?!? https://redux-form.com/7.0.4/docs/api/field.md/#-code-validate-value-allvalues-props-name-gt-error-code-optional- The API key is not needed in production - it is only needed for writing missings. The projectId is enough to load translations. |
There is a difference, if inside the render method, the validation function is regenerated every time and that causes failure redux-form/redux-form#2453 (erikras comment). So as I understand there is no option from the i18n side also, since it might not be loaded yet? |
did you try the suggestion from @szerintedmi redux-form/redux-form#2453 (comment) |
@jamuhl. That solution seems to work, even though it forces the use of component with a state. If you would like to use stateless component, the gist in this comment seems to do the trick. |
yes the alternative would be a component memoizing once created... personally i would go the memoizing way - but would extend it so there is a listen to langaugeChanged event on i18next and on change the mem would be resetted. |
Further test shows that having two memoized validators also creates an issue of not validating the fields. Like -> [minValue0, required]. |
How annoying...what we did (before there was validate introduced on field: using the hoc
where validate is:
But i would open an issue over at redux-form - i mean having two such memoized validators should work in my opinion... |
I headed the same question and I was also dealing with async server validation where I receive constants, and I solved that by returning constants also from static validators:
And translate them in rendering component
|
@melounek This seems to be another good workaround. Only problem I see with this is when my error would use a variable.
|
@rntorm did you find a solution to this? if so could this be closed? |
@jamuhl Yeah, I used a workaround that creates the translations in the class constructor. It works that way, even though its not the perfect solution. I prefer stateless components to class. |
I wanted to document a related problem that I have managed to solve. The issue is already closed, but I believe this is the best place for others to find this hint. I wanted to create a form which was able to create an array as one of the form fields. I did not manage to use a function from the props for the 'component' of the FieldArray inside the render function of the form component, but had to create one outside of the render function. That helped me to avoid an infinite loop and is working fine. Of course it was necessary to import i18n's |
I am not able to come up with a way to translate field level validations in redux-form.
In the example below, how can I translate a string outside of the component scope?
Defining minValue0 inside the component does not work because the validation will break.
The text was updated successfully, but these errors were encountered: