ant-design Form.Item rules validation messages translations don`t work

6yoyoihd  于 3个月前  发布在  其他
关注(0)|答案(3)|浏览(70)
  • I have searched the issues of this repository and believe that this is not a duplicate.

Steps to reproduce

  1. Type a few characters into the input field
  2. Validation message should appear
  3. Click on the language dropdown menu and change the language
  4. Type one more character into the input field. Translation changes to the selected one. It looks like rerender for validation rules doesn't run

What is expected?

Everything that uses i18n should be translated

What is actually happening?

Everything translates except Ant Design Form.Item rules validation message
| Environment | Info |
| ------------ | ------------ |
| antd | 4.18.5 |
| React | 17.0.2 |
| System | Windows 10 |
| Browser | Chrome 97.0 |

pprl5pva

pprl5pva1#

Hello @Namors14. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Namors14,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的 预设模板 ,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

qgzx9mmu

qgzx9mmu2#

const handleLanguageChanged = () => {
form.validateFields()
}

useEffect(() => {
i18n.on('languageChanged', handleLanguageChanged);
return () => {
i18n.off('languageChanged', handleLanguageChanged);
};
}, [handleLanguageChanged]);

try this

vbkedwbf

vbkedwbf3#

1) First we have to find only fields with errors.

(Warning: the reducer callback function with a comma expression)

2) Then validate only them when changing the language.

useEffect(() => {
    const errorFields = form.getFieldsError()
      .reduce((arr, field) => (field.errors.length && arr.push(field.name), arr), []);

    form.validateFields(errorFields);
  }, [i18n.language]);

相关问题