feat(Form): support i18n fix alibaba-fusion#2829

docs/config-provider/demo/components.md

@@ -15,7 +15,7 @@ Show the components that support internationalization in the current Next compon
 ---
 
 ````jsx
-import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table } from '@alifd/next';
+import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table , Form, Input, Field } from '@alifd/next';
 
 import enUS from '@alifd/next/lib/locale/en-us';
 import zhCN from '@alifd/next/lib/locale/zh-cn';
@@ -52,12 +52,18 @@ class Demo extends React.Component {
 
         this.changeLang = this.changeLang.bind(this);
         this.showDialog = this.showDialog.bind(this);
+        this.field = new Field(this);
+    }
+
+    componentDidMount() {
+        this.field.validate();
     }
 
     changeLang(lang) {
         this.setState({
             lang
         });
+        this.field.validate();
     }
 
     showDialog() {
@@ -87,6 +93,10 @@ class Demo extends React.Component {
                         <TimePicker />
                         <RangePicker />
                         <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape="card" />
+                        <Form field={this.field}>
+                            <Form.Item required><Input name="validate" readOnly style={{width: 350}} /></Form.Item>
+                        </Form>
+
                         <Pagination defaultCurrent={2} />
                         <Transfer dataSource={transferDataSource} defaultValue={['3']} defaultLeftChecked={['1']} titles={['Source', 'Target']} />
                         <Table style={{ width: '500px' }} dataSource={[]}>

package.json

@@ -92,7 +92,7 @@
     ]
   },
   "dependencies": {
-    "@alifd/field": "~1.4.1",
+    "@alifd/field": "~1.5.0",
     "@alifd/validate": "~1.2.0",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.3",

src/form/form.jsx

@@ -189,9 +189,14 @@ export default class Form extends React.Component {
                 if ('value' in props) {
                     options.values = props.value;
                 }
+
                 this._formField = new Field(this, options);
             }
 
+            if (props.locale && props.locale.Validate) {
+                this._formField.setOptions({ messages: props.locale.Validate });
+            }
+
             props.saveField(this._formField);
         }
     }
@@ -216,6 +221,10 @@ export default class Form extends React.Component {
             if ('error' in props && props.error !== prevProps.error) {
                 this._formField.setValues(props.error);
             }
+            // 多语言切换会滞后
+            // if (prevProps.locale !== props.locale && typeof props.locale === 'object' && props.locale.Validate) {
+            //     this._formField.setOptions({messages: props.locale.Validate})
+            // }
         }
     }
 

src/locale/en-us.js

@@ -138,4 +138,36 @@ export default {
     Tab: {
         closeAriaLabel: 'close',
     },
+    Form: {
+        Validate: {
+            default: 'Validation error on field %s',
+            required: '%s is required',
+            format: {
+                number: '%s is not a number',
+                email: '%s is not a valid email',
+                url: '%s is not a valid url',
+                tel: '%s is not a valid phone number',
+            },
+            number: {
+                length: '%s must be exactly %s characters',
+                min: '%s cannot be less than %s',
+                max: '%s cannot be greater than %s',
+                minLength: '%s must be at least %s characters',
+                maxLength: '%s cannot be longer than %s characters',
+            },
+            string: {
+                length: '%s must be exactly %s characters',
+                min: '%s cannot be less than %s',
+                max: '%s cannot be greater than %s',
+                minLength: '%s must be at least %s characters',
+                maxLength: '%s cannot be longer than %s characters',
+            },
+            array: {
+                length: '%s must be exactly %s in length',
+                minLength: '%s cannot be less than %s in length',
+                maxLength: '%s cannot be greater than %s in length',
+            },
+            pattern: '%s value %s does not match pattern %s',
+        },
+    },
 };

src/locale/zh-cn.js

@@ -138,4 +138,36 @@ export default {
     Tab: {
         closeAriaLabel: '关闭',
     },
+    Form: {
+        Validate: {
+            default: '%s 校验失败',
+            required: '%s 是必填字段',
+            format: {
+                number: '%s 不是合法的数字',
+                email: '%s 不是合法的 email 地址',
+                url: '%s 不是合法的 URL 地址',
+                tel: '%s 不是合法的电话号码',
+            },
+            number: {
+                length: '%s 长度必须是 %s',
+                min: '%s 字段数值不得小于 %s',
+                max: '%s 字段数值不得大于 %s',
+                minLength: '%s 字段字符长度不得少于 %s',
+                maxLength: '%s 字段字符长度不得超过 %s',
+            },
+            string: {
+                length: '%s 长度必须是 %s',
+                min: '%s 字段数值不得小于 %s',
+                max: '%s 字段数值不得大于 %s',
+                minLength: '%s 字段字符长度不得少于 %s',
+                maxLength: '%s 字段字符长度不得超过 %s',
+            },
+            array: {
+                length: '%s 个数必须是 %s',
+                minLength: '%s 个数不得少于 %s',
+                maxLength: '%s 个数不得超过 %s',
+            },
+            pattern: '%s 字段数值 %s 不匹配正则 %s',
+        },
+    },
 };

src/locale/zh-hk.js

@@ -138,4 +138,36 @@ export default {
     Tab: {
         closeAriaLabel: '關閉',
     },
+    Form: {
+        Validate: {
+            default: '%s 校驗失敗',
+            required: '%s 是必填欄位',
+            format: {
+                number: '%s 不是合法的數位',
+                email: '%s 不是合法的email地址',
+                url: '%s 不是合法的URL地址',
+                tel: '%s 不是合法的電話號碼',
+            },
+            number: {
+                length: '%s 長度必須是 %s',
+                min: '%s 欄位數值不得小於 %s',
+                max: '%s 欄位數值不得大於 %s',
+                minLength: '%s 欄位字元長度不得少於 %s',
+                maxLength: '%s 欄位字元長度不得超過 %s',
+            },
+            string: {
+                length: '%s 長度必須是 %s',
+                min: '%s 欄位數值不得小於 %s',
+                max: '%s 欄位數值不得大於 %s',
+                minLength: '%s 欄位字元長度不得少於 %s',
+                maxLength: '%s 欄位字元長度不得超過 %s',
+            },
+            array: {
+                length: '%s 個數必須是 %s',
+                minLength: '%s 個數不得少於 %s',
+                maxLength: '%s 個數不得超過 %s',
+            },
+            pattern: '%s 數值 %s 不匹配正則 %s',
+        },
+    },
 };

src/locale/zh-tw.js

@@ -138,4 +138,36 @@ export default {
     Tab: {
         closeAriaLabel: '關閉',
     },
+    Form: {
+        Validate: {
+            default: '%s 校驗失敗',
+            required: '%s 是必填欄位',
+            format: {
+                number: '%s 不是合法的數位',
+                email: '%s 不是合法的email地址',
+                url: '%s 不是合法的URL地址',
+                tel: '%s 不是合法的電話號碼',
+            },
+            number: {
+                length: '%s 長度必須是 %s',
+                min: '%s 欄位數值不得小於 %s',
+                max: '%s 欄位數值不得大於 %s',
+                minLength: '%s 欄位字元長度不得少於 %s',
+                maxLength: '%s 欄位字元長度不得超過 %s',
+            },
+            string: {
+                length: '%s 長度必須是 %s',
+                min: '%s 欄位數值不得小於 %s',
+                max: '%s 欄位數值不得大於 %s',
+                minLength: '%s 欄位字元長度不得少於 %s',
+                maxLength: '%s 欄位字元長度不得超過 %s',
+            },
+            array: {
+                length: '%s 個數必須是 %s',
+                minLength: '%s 個數不得少於 %s',
+                maxLength: '%s 個數不得超過 %s',
+            },
+            pattern: '%s 數值 %s 不匹配正則 %s',
+        },
+    },
 };