feat(Form): add error-message-align prop

src/field/README.md

@@ -231,14 +231,14 @@ Use `input-align` prop to align the input value
 | autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` |
 | show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` |
 | error | Whether to show error info | *boolean* | `false` |
+| error-message | Error message | *string* | - |
 | formatter `v2.4.2` | Input value formatter | *Function* | - |
 | arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` |
-| error-message | Error message | *string* | `''` |
 | label-class | Label className | *any* | - |
 | label-width | Label width | *number \| string* | `90px` |
 | label-align | Label text align, can be set to `center` `right` | *string* | `left` |
 | input-align | Input text align, can be set to `center` `right` | *string* | `left` |
-| error-message-align | Error message text align, can be set to `center` `right` | *string* | `left` |
+| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
 | autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` |
 | left-icon | Left side icon name | *string* | - |
 | right-icon | Right side icon name | *string* | - |

src/field/README.zh-CN.md

@@ -250,9 +250,9 @@ export default {
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` |
 | show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` |
 | error | 是否将输入内容标红 | *boolean* | `false` |
+| error-message | 底部错误提示文案，为空时不展示 | *string* | - |
 | formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - |
 | arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` |
-| error-message | 底部错误提示文案，为空时不展示 | *string* | `''` |
 | label-class | 左侧文本额外类名 | *any* | - |
 | label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` |
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` |

src/field/demo/ErrorInfo.vue

@@ -3,10 +3,10 @@
     <van-cell-group>
       <van-field
         v-model="username"
+        error
         required
         :label="$t('username')"
         :placeholder="$t('usernamePlaceholder')"
-        error
       />
       <van-field
         v-model="phone"

src/field/index.js

@@ -426,10 +426,10 @@ export default createComponent({
       const message = this.errorMessage || this.validateMessage;
 
       if (message) {
+        const errorMessageAlign = this.getProp('errorMessageAlign');
+
         return (
-          <div class={bem('error-message', this.errorMessageAlign)}>
-            {message}
-          </div>
+          <div class={bem('error-message', errorMessageAlign)}>{message}</div>
         );
       }
     },

src/form/README.md

@@ -408,6 +408,7 @@ export default {
 | label-width | Field label width | *number \| string* | `90px` |
 | label-align | Field label text align, can be set to `center` `right` | *string* | `left` |
 | input-align | Field input text align, can be set to `center` `right` | *string* | `left` |
+| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
 | validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
 
 ### Events

src/form/README.zh-CN.md

@@ -440,6 +440,7 @@ export default {
 | label-width | 表单项文本宽度，默认单位为`px` | *number \| string* | `90px` |
 | label-align | 表单项文本对齐方式，可选值为 `center` `right` | *string* | `left` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` |
+| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
 | validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
 
 ### Events

src/form/index.js

@@ -8,6 +8,7 @@ export default createComponent({
     labelAlign: String,
     inputAlign: String,
     validateFirst: Boolean,
+    errorMessageAlign: Boolean,
   },
 
   provide() {