feat(Form): add show-error prop (#5941)

src/field/index.js

@@ -101,6 +101,13 @@ export default createComponent({
       );
     },
 
+    showError() {
+      if (this.vanForm && this.vanForm.showError && this.validateMessage) {
+        return true;
+      }
+      return this.error;
+    },
+
     listeners() {
       const listeners = {
         ...this.$listeners,
@@ -540,7 +547,7 @@ export default createComponent({
         scopedSlots={scopedSlots}
         arrowDirection={this.arrowDirection}
         class={bem({
-          error: this.error || this.validateMessage,
+          error: this.showError,
           [`label-${labelAlign}`]: labelAlign,
           'min-height': this.type === 'textarea' && !this.autosize,
         })}

src/form/README.md

@@ -432,6 +432,7 @@ export default {
 | 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 validation failed | *boolean* | `false` |
+| show-error `v2.5.9` | Whether to highlight input when validation failed | *boolean* | `true` |
 | 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 `v2.5.9` | 是否在校验不通过时标红输入框 | *boolean* | `true` |
 | 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',
     },
+    showError: {
+      type: Boolean,
+      default: true,
+    },
     showErrorMessage: {
       type: Boolean,
       default: true,

src/form/test/props.spec.js

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