add a error prop for setting the error message manually

examples/docs/en-US/form.md

@@ -820,7 +820,4 @@ Form component allows you to verify your data, helping you find and correct erro
 | label-width | width of label, e.g. '50px' | string | — | — |
 | required | whether the field is required or not, will be determined by validation rules if omitted | string |  — | false |
 | rules | validation rules of form | object | — | — |
-
+| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
-
-
-

examples/docs/zh-CN/form.md

@@ -811,3 +811,4 @@
 | label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
 | rules    | 表单验证规则 | object | — | — |
+| error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |

packages/form/src/form-item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="el-form-item" :class="{
-    'is-error': error !== '',
+    'is-error': validateState === 'error',
-    'is-validating': validating,
+    'is-validating': validateState === 'validating',
     'is-required': isRequired || required
   }">
     <label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
@@ -10,7 +10,7 @@
     <div class="el-form-item__content" v-bind:style="contentStyle">
       <slot></slot>
       <transition name="md-fade-bottom">
-        <div class="el-form-item__error" v-if="error !== ''">{{error}}</div>
+        <div class="el-form-item__error" v-if="validateState === 'error'">{{validateMessage}}</div>
       </transition>
     </div>
   </div>
@@ -19,6 +19,8 @@
   import AsyncValidator from 'async-validator';
   import emitter from 'element-ui/src/mixins/emitter';
 
+  function noop() {}
+
   export default {
     name: 'ElFormItem',
 
@@ -31,7 +33,18 @@
       labelWidth: String,
       prop: String,
       required: Boolean,
-      rules: [Object, Array]
+      rules: [Object, Array],
+      error: String,
+      validateStatus: String
+    },
+    watch: {
+      error(value) {
+        this.validateMessage = value;
+        this.validateState = 'error';
+      },
+      validateStatus(value) {
+        this.validateState = value;
+      }
     },
     computed: {
       labelStyle() {
@@ -73,23 +86,22 @@
     },
     data() {
       return {
-        valid: true,
+        validateState: '',
-        error: '',
+        validateMessage: '',
         validateDisabled: false,
-        validating: false,
         validator: {},
         isRequired: false
       };
     },
     methods: {
-      validate(trigger, cb) {
+      validate(trigger, callback = noop) {
         var rules = this.getFilteredRule(trigger);
         if (!rules || rules.length === 0) {
-          cb && cb();
+          callback();
           return true;
         }
 
-        this.validating = true;
+        this.validateState = 'validating';
 
         var descriptor = {};
         descriptor[this.prop] = rules;
@@ -100,16 +112,15 @@
         model[this.prop] = this.fieldValue;
 
         validator.validate(model, { firstFields: true }, (errors, fields) => {
-          this.valid = !errors;
+          this.validateState = !errors ? 'success' : 'error';
-          this.error = errors ? errors[0].message : '';
+          this.validateMessage = errors ? errors[0].message : '';
 
-          cb && cb(errors);
+          callback(errors);
-          this.validating = false;
         });
       },
       resetField() {
-        this.valid = true;
+        this.validateState = '';
-        this.error = '';
+        this.validateMessage = '';
 
         let model = this.form.model;
         let value = this.fieldValue;

test/unit/specs/form.spec.js

@@ -219,15 +219,15 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.name.error).to.equal('请输入活动名称');
+          expect(fields.name.validateMessage).to.equal('请输入活动名称');
           vm.setValue('aaaaa');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.name.error).to.equal('');
+            expect(fields.name.validateMessage).to.equal('');
             vm.setValue('aa');
 
             vm.$refs.form.$nextTick(_ => {
-              expect(fields.name.error).to.equal('请输入活动名称');
+              expect(fields.name.validateMessage).to.equal('请输入活动名称');
               done();
             });
           });
@@ -265,15 +265,15 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.name.error).to.equal('请输入活动名称');
+          expect(fields.name.validateMessage).to.equal('请输入活动名称');
           vm.setValue('aaaaa');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.name.error).to.equal('');
+            expect(fields.name.validateMessage).to.equal('');
             vm.setValue('aa');
 
             vm.$refs.form.$nextTick(_ => {
-              expect(fields.name.error).to.equal('请输入活动名称');
+              expect(fields.name.validateMessage).to.equal('请输入活动名称');
               done();
             });
           });
@@ -315,11 +315,11 @@ describe('Form', () => {
         expect(valid).to.true;
         vm.setValue('');
         setTimeout(_ => {
-          expect(fields.region.error).to.equal('请选择活动区域');
+          expect(fields.region.validateMessage).to.equal('请选择活动区域');
           vm.setValue('shanghai');
 
           setTimeout(_ => {
-            expect(fields.region.error).to.equal('');
+            expect(fields.region.validateMessage).to.equal('');
             done();
           }, 100);
         }, 100);
@@ -356,12 +356,12 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.date.error).to.equal('请选择日期');
+          expect(fields.date.validateMessage).to.equal('请选择日期');
 
           vm.setValue(new Date());
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.date.error).to.equal('');
+            expect(fields.date.validateMessage).to.equal('');
             done();
           });
         });
@@ -398,11 +398,11 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.date.error).to.equal('请选择时间');
+          expect(fields.date.validateMessage).to.equal('请选择时间');
           vm.setValue(new Date());
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.date.error).to.equal('');
+            expect(fields.date.validateMessage).to.equal('');
             done();
           });
         });
@@ -444,11 +444,11 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.type.error).to.equal('请选择活动类型');
+          expect(fields.type.validateMessage).to.equal('请选择活动类型');
           vm.setValue(['地推活动']);
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.type.error).to.equal('');
+            expect(fields.type.validateMessage).to.equal('');
             done();
           });
         });
@@ -488,11 +488,11 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.type.error).to.equal('请选择活动类型');
+          expect(fields.type.validateMessage).to.equal('请选择活动类型');
           vm.setValue('线下场地免费');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.type.error).to.equal('');
+            expect(fields.type.validateMessage).to.equal('');
             done();
           });
         });
@@ -568,15 +568,55 @@ describe('Form', () => {
         let fields = vm.$refs.form.fields;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.name.error).to.equal('长度至少为5');
+          expect(fields.name.validateMessage).to.equal('长度至少为5');
           vm.setValue('aaaaaa');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.name.error).to.equal('');
+            expect(fields.name.validateMessage).to.equal('');
             done();
           });
         });
       });
     });
+    it('error', done => {
+      vm = createVue({
+        template: `
+          <el-form :model="form" :rules="rules" ref="form">
+            <el-form-item label="活动名称" prop="name" :error="error" ref="formitem">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        `,
+        data() {
+          return {
+            error: 'dsad',
+            form: {
+              name: 'sada'
+            },
+            rules: {
+              name: [
+                { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
+              ]
+            }
+          };
+        },
+        methods: {
+          setValue(value) {
+            this.form.name = value;
+          }
+        }
+      }, true);
+      vm.$refs.form.validate(valid => {
+        let fields = vm.$refs.form.fields;
+        expect(valid).to.true;
+        vm.error = '输入不合法';
+
+        vm.$refs.formitem.$nextTick(_ => {
+          expect(fields.name.validateState).to.equal('error');
+          expect(fields.name.validateMessage).to.equal('输入不合法');
+          done();
+        });
+      });
+    });
   });
 });