improvement: Form default locale (#23165)

* improve: Form default locale

* fix lint

* fix lint

* improve form doc

* add test case

* improve form validate messages

components/config-provider/__tests__/locale.test.js

@@ -6,6 +6,12 @@ import zhCN from '../../locale/zh_CN';
 import enUS from '../../locale/en_US';
 import TimePicker from '../../time-picker';
 import Modal from '../../modal';
+import Form from '../../form';
+
+const delay = (timeout = 0) =>
+  new Promise(resolve => {
+    setTimeout(resolve, timeout);
+  });
 
 describe('ConfigProvider.Locale', () => {
   function $$(className) {
@@ -104,4 +110,41 @@ describe('ConfigProvider.Locale', () => {
       testLocale(wrapper);
     });
   });
+
+  describe('form validateMessages', () => {
+    const wrapperComponent = ({ validateMessages }) =>
+      mount(
+        <ConfigProvider locale={zhCN} form={{ validateMessages }}>
+          <Form initialValues={{ age: 18 }}>
+            <Form.Item name="test" label="姓名" rules={[{ required: true }]}>
+              <input />
+            </Form.Item>
+            <Form.Item name="age" label="年龄" rules={[{ type: 'number', len: 17 }]}>
+              <input />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+
+    it('set locale zhCN', async () => {
+      const wrapper = wrapperComponent({});
+
+      wrapper.find('form').simulate('submit');
+      await delay(50);
+      wrapper.update();
+
+      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('请输入姓名');
+    });
+
+    it('set locale zhCN and set form validateMessages one item, other use default message', async () => {
+      const wrapper = wrapperComponent({ validateMessages: { required: '必须' } });
+
+      wrapper.find('form').simulate('submit');
+      await delay(50);
+      wrapper.update();
+
+      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('必须');
+      expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual('年龄必须等于17');
+    });
+  });
 });

components/config-provider/index.tsx

@@ -93,10 +93,17 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
     let childNode = children;
 
     // Additional Form provider
+    let validateMessages: ValidateMessages = {};
+
+    if (locale && locale.Form && locale.Form.defaultValidateMessages) {
+      validateMessages = locale.Form.defaultValidateMessages;
+    }
     if (form && form.validateMessages) {
-      childNode = (
+      validateMessages = { ...validateMessages, ...form.validateMessages };
-        <RcFormProvider validateMessages={form.validateMessages}>{children}</RcFormProvider>
+    }
-      );
+
+    if (Object.keys(validateMessages).length > 0) {
+      childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
     }
 
     return (

components/locale-provider/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ValidateMessages } from 'rc-field-form/lib/interface';
 import warning from '../_util/warning';
 
 import { ModalLocale, changeConfirmLocale } from '../modal/locale';
@@ -30,6 +31,9 @@ export interface Locale {
   PageHeader?: Object;
   Icon?: Object;
   Text?: Object;
+  Form?: {
+    defaultValidateMessages: ValidateMessages;
+  };
 }
 
 export interface LocaleProviderProps {

components/locale/zh_CN.tsx

@@ -1,9 +1,12 @@
+/* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/zh_CN';
 import DatePicker from '../date-picker/locale/zh_CN';
 import TimePicker from '../time-picker/locale/zh_CN';
 import Calendar from '../calendar/locale/zh_CN';
 import { Locale } from '../locale-provider';
 
+const typeTemplate = '${label}不是一个有效的${type}';
+
 const localeValues: Locale = {
   locale: 'zh-cn',
   Pagination,
@@ -64,6 +67,55 @@ const localeValues: Locale = {
   PageHeader: {
     back: '返回',
   },
+  Form: {
+    defaultValidateMessages: {
+      default: '字段验证错误${label}',
+      required: '请输入${label}',
+      enum: '${label}必须是其中一个[${enum}]',
+      whitespace: '${label}不能为空字符',
+      date: {
+        format: '${label}日期格式无效',
+        parse: '${label}不能转换为日期',
+        invalid: '${label}是一个无效日期',
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: '${label}须为${len}个字符',
+        min: '${label}最少${min}个字符',
+        max: '${label}最多${max}个字符',
+        range: '${label}须在${min}-${max}字符之间',
+      },
+      number: {
+        len: '${label}必须等于${len}',
+        min: '${label}最小值为${min}',
+        max: '${label}最大值为${max}',
+        range: '${label}须在${min}-${max}之间',
+      },
+      array: {
+        len: '须为${len}个${label}',
+        min: '最少${min}个${label}',
+        max: '最多${max}个${label}',
+        range: '${label}数量须在${min}-${max}之间',
+      },
+      pattern: {
+        mismatch: '${label}与模式不匹配${pattern}',
+      },
+    },
+  },
 };
 
 export default localeValues;