feat(Form): add show-error-message prop (#5927)

src/field/index.js

@@ -474,6 +474,10 @@ export default createComponent({
     },
 
     genMessage() {
+      if (this.vanForm && this.vanForm.showErrorMessage === false) {
+        return;
+      }
+
       const message = this.errorMessage || this.validateMessage;
 
       if (message) {

src/form/README.md

@@ -431,7 +431,8 @@ export default {
 | validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` |
 | colon | Whether to display `:` after label | *boolean* | `false` |
 | validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
-| scroll-to-error `v2.5.2` | Whether to scroll to the error field when submit failed | *boolean* | `false` |
+| scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | *boolean* | `false` |
+| show-error-message `v2.5.8` | Whether to show error message when validation failed | *boolean* | `true` |
 
 ### Data Structure of Rule 
 

src/form/README.zh-CN.md

@@ -467,6 +467,7 @@ export default {
 | colon | 是否在 label 后面添加冒号 | *boolean* | `false` |
 | validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
 | scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
+| show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | *boolean* | `true` |
 
 > 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
 

src/form/index.js

@@ -15,6 +15,10 @@ export default createComponent({
       type: String,
       default: 'onBlur',
     },
+    showErrorMessage: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   provide() {

src/form/test/props.spec.js

@@ -381,3 +381,28 @@ test('scroll-to-error prop', async () => {
 
   expect(fn).toHaveBeenCalledTimes(1);
 });
+
+test('show-error-message prop', async () => {
+  const wrapper = mountForm({
+    template: `
+      <van-form :show-error-message="showErrorMessage">
+        <van-field name="A" :rules="rulesA" value="" />
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data() {
+      return {
+        ...getSimpleRules(),
+        showErrorMessage: false,
+      };
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(wrapper.contains('.van-field__error-message')).toBeFalsy();
+
+  wrapper.setData({ showErrorMessage: true });
+
+  await submitForm(wrapper);
+  expect(wrapper.contains('.van-field__error-message')).toBeTruthy();
+});