fix form validate bug (#1363)

examples/docs/en-US/form.md

@@ -6,10 +6,10 @@
           return callback(new Error('Please input the age'));
         }
         setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
             callback(new Error('Please input digits'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
               callback(new Error('Age must be greater than 18'));
             } else {
               callback();
@@ -117,7 +117,7 @@
             { validator: validaePass2, trigger: 'blur' }
           ],
           age: [
-            { validator: checkAge, trigger: 'change', trigger: 'blur' }
+            { validator: checkAge, trigger: 'blur' }
           ]
         },
         dynamicForm: {
@@ -172,6 +172,9 @@
       handleReset2() {
         this.$refs.ruleForm2.resetFields();
       },
+      handleReset3() {
+        this.$refs.dynamicForm.resetFields();
+      },
       handleValidate(prop, errorMsg) {
         console.log(prop, errorMsg);
       },
@@ -632,7 +635,7 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
-    <el-input v-model="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="handleSubmit2">Submit</el-button>
@@ -647,10 +650,10 @@ Form component allows you to verify your data, helping you find and correct erro
           return callback(new Error('Please input the age'));
         }
         setTimeout(() => {
-          if (!Number.isInteger(age)) {
+          if (!Number.isInteger(value)) {
             callback(new Error('Please input digits'));
-          } else{
-            if (age < 18) {
+          } else {
+            if (value < 18) {
               callback(new Error('Age must be greater than 18'));
             } else {
               callback();
@@ -691,7 +694,7 @@ Form component allows you to verify your data, helping you find and correct erro
             { validator: validaePass2, trigger: 'blur' }
           ],
           age: [
-            { validator: checkAge, trigger: 'change', trigger: 'blur' }
+            { validator: checkAge, trigger: 'blur' }
           ]
         }
       };
@@ -729,12 +732,9 @@ Form component allows you to verify your data, helping you find and correct erro
     v-for="(domain, index) in dynamicForm.domains"
     :label="'Domain' + index"
     :key="domain.key"
-    :prop="'domains:' + index"
+    :prop="'domains.' + index + '.value'"
     :rules="{
-      type: 'object', required: true,
-      fields: {
-        value: { required: true, message: 'domain can not be null', trigger: 'blur' }
-      }
+      required: true, message: 'domain can not be null', trigger: 'blur'
     }"
   >
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
@@ -742,6 +742,7 @@ Form component allows you to verify your data, helping you find and correct erro
   <el-form-item>
     <el-button type="primary" @click="handleSubmit3">Submit</el-button>
     <el-button @click="addDomain">New domain</el-button>
+    <el-button @click="handleReset3">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -774,15 +775,18 @@ Form component allows you to verify your data, helping you find and correct erro
           }
         });
       },
+      handleReset3() {
+        this.$refs.dynamicForm.resetFields();
+      },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicForm.domains.indexOf(item);
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicForm.domains.splice(index, 1);
         }
       },
       addDomain() {
         this.dynamicForm.domains.push({
-          key: this.dynamicForm.domains.length,
+          key: Date.now(),
           value: ''
         });
       }

examples/docs/zh-CN/form.md

@@ -122,8 +122,8 @@
         },
         dynamicForm: {
           domains: [{
-            key: Date.now(),
-            value: ''
+            value: '',
+            key: Date.now()
           }],
           email: ''
         },
@@ -172,6 +172,9 @@
       handleReset2() {
         this.$refs.ruleForm2.resetFields();
       },
+      handleReset3() {
+        this.$refs.dynamicForm.resetFields();
+      },
       handleValidate(prop, errorMsg) {
         console.log(prop, errorMsg);
       },
@@ -189,8 +192,8 @@
       },
       addDomain() {
         this.dynamicForm.domains.push({
-          key: Date.now(),
-          value: ''
+          value: '',
+          key: Date.now()
         });
       }
     }
@@ -720,12 +723,9 @@
     v-for="(domain, index) in dynamicForm.domains"
     :label="'域名' + index"
     :key="domain.key"
-    :prop="'domains:' + index"
+    :prop="'domains.' + index + '.value'"
     :rules="{
-      type: 'object', required: true,
-      fields: {
-        value: { required: true, message: '域名不能为空', trigger: 'blur' }
-      }
+      required: true, message: '域名不能为空', trigger: 'blur'
     }"
   >
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
@@ -733,6 +733,7 @@
   <el-form-item>
     <el-button type="primary" @click="handleSubmit3">提交</el-button>
     <el-button @click="addDomain">新增域名</el-button>
+    <el-button @click="handleReset3">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -741,7 +742,6 @@
       return {
         dynamicForm: {
           domains: [{
-            key: 1,
             value: ''
           }],
           email: ''
@@ -765,6 +765,9 @@
           }
         });
       },
+      handleReset3() {
+        this.$refs.dynamicForm.resetFields();
+      },
       removeDomain(item) {
         var index = this.dynamicForm.domains.indexOf(item)
         if (index !== -1) {
@@ -773,8 +776,8 @@
       },
       addDomain() {
         this.dynamicForm.domains.push({
-          key: this.dynamicForm.domains.length,
-          value: ''
+          value: '',
+          key: Date.now()
         });
       }
     }

packages/date-picker/src/panel/date.vue

@@ -183,7 +183,7 @@
     methods: {
       handleClear() {
         this.date = new Date();
-        this.$emit('pick');
+        this.$emit('pick', '');
       },
 
       resetDate() {

packages/date-picker/src/panel/time-select.vue

@@ -84,7 +84,7 @@
       },
 
       handleClear() {
-        this.$emit('pick');
+        this.$emit('pick', '');
       }
     },
 

packages/date-picker/src/panel/time.vue

@@ -101,7 +101,7 @@
 
     methods: {
       handleClear() {
-        this.handleCancel();
+        this.$emit('pick', '');
       },
 
       handleCancel() {

packages/form/src/form-item.vue

@@ -21,6 +21,29 @@
 
   function noop() {}
 
+  function getPropByPath(obj, path) {
+    let tempObj = obj;
+    path = path.replace(/\[(\w+)\]/g, '.$1');
+    path = path.replace(/^\./, '');
+
+    let keyArr = path.split('.');
+    let i = 0;
+
+    for (let len = keyArr.length; i < len - 1; ++i) {
+      let key = keyArr[i];
+      if (key in tempObj) {
+        tempObj = tempObj[key];
+      } else {
+        throw new Error('please transfer a valid prop path to form item!');
+      }
+    }
+    return {
+      o: tempObj,
+      k: keyArr[i],
+      v: tempObj[keyArr[i]]
+    };
+  }
+
   export default {
     name: 'ElFormItem',
 
@@ -76,11 +99,12 @@
           var model = this.form.model;
           if (!model || !this.prop) { return; }
 
-          var temp = this.prop.split(':');
+          var path = this.prop;
+          if (path.indexOf(':') !== -1) {
+            path = path.replace(/:/, '.');
+          }
 
-          return temp.length > 1
-            ? model[temp[0]][temp[1]]
-            : model[this.prop];
+          return getPropByPath(model, path).v;
         }
       }
     },
@@ -124,13 +148,19 @@
 
         let model = this.form.model;
         let value = this.fieldValue;
+        let path = this.prop;
+        if (path.indexOf(':') !== -1) {
+          path = path.replace(/:/, '.');
+        }
+
+        let prop = getPropByPath(model, path);
 
         if (Array.isArray(value) && value.length > 0) {
           this.validateDisabled = true;
-          model[this.prop] = [];
+          prop.o[prop.k] = [];
         } else if (value) {
           this.validateDisabled = true;
-          model[this.prop] = this.initialValue;
+          prop.o[prop.k] = this.initialValue;
         }
       },
       getRules() {
@@ -165,7 +195,7 @@
         this.dispatch('form', 'el.form.addField', [this]);
 
         Object.defineProperty(this, 'initialValue', {
-          value: this.form.model[this.prop]
+          value: this.fieldValue
         });
 
         let rules = this.getRules();

packages/form/src/form.vue

@@ -25,49 +25,43 @@
     },
     data() {
       return {
-        fields: {},
-        fieldLength: 0
+        fields: []
       };
     },
     created() {
       this.$on('el.form.addField', (field) => {
-        this.fields[field.prop] = field;
-        this.fieldLength++;
+        if (field) {
+          this.fields.push(field);
+        }
       });
       /* istanbul ignore next */
       this.$on('el.form.removeField', (field) => {
-        if (this.fields[field.prop]) {
-          delete this.fields[field.prop];
-          this.fieldLength--;
+        if (field.prop) {
+          this.fields.splice(this.fields.indexOf(field), 1);
         }
       });
     },
     methods: {
       resetFields() {
-        for (let prop in this.fields) {
-          let field = this.fields[prop];
+        this.fields.forEach(field => {
           field.resetField();
-        }
+        });
       },
       validate(callback) {
-        var count = 0;
-        var valid = true;
-
-        for (let prop in this.fields) {
-          let field = this.fields[prop];
+        let valid = true;
+        this.fields.forEach((field, index) => {
           field.validate('', errors => {
             if (errors) {
               valid = false;
             }
-
-            if (++count === this.fieldLength) {
+            if (index === this.fields.length - 1) {
               callback(valid);
             }
           });
-        }
+        });
       },
       validateField(prop, cb) {
-        var field = this.fields[prop];
+        var field = this.fields.filter(field => field.prop === prop)[0];
         if (!field) { throw new Error('must call validateField with valid prop string!'); }
 
         field.validate('', cb);

packages/input/src/input.vue

@@ -148,7 +148,7 @@
 
     computed: {
       validating() {
-        return this.$parent.validating;
+        return this.$parent.validateState === 'validating';
       }
     },
 

packages/theme-default/src/input.css

@@ -40,6 +40,7 @@
       width: 35px;
       height: 100%;
       right: 0;
+      top: 0;
       text-align: center;
       color: var(--input-icon-color);
 

test/unit/specs/form.spec.js

@@ -192,7 +192,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="name">
+            <el-form-item label="活动名称" prop="name" ref="field">
               <el-input v-model="form.name"></el-input>
             </el-form-item>
           </el-form>
@@ -216,18 +216,18 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.name.validateMessage).to.equal('请输入活动名称');
+          expect(field.validateMessage).to.equal('请输入活动名称');
           vm.setValue('aaaaa');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.name.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             vm.setValue('aa');
 
             vm.$refs.form.$nextTick(_ => {
-              expect(fields.name.validateMessage).to.equal('请输入活动名称');
+              expect(field.validateMessage).to.equal('请输入活动名称');
               done();
             });
           });
@@ -238,7 +238,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="name">
+            <el-form-item label="活动名称" prop="name" ref="field">
               <el-input type="textarea" v-model="form.name"></el-input>
             </el-form-item>
           </el-form>
@@ -262,18 +262,18 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.name.validateMessage).to.equal('请输入活动名称');
+          expect(field.validateMessage).to.equal('请输入活动名称');
           vm.setValue('aaaaa');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.name.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             vm.setValue('aa');
 
             vm.$refs.form.$nextTick(_ => {
-              expect(fields.name.validateMessage).to.equal('请输入活动名称');
+              expect(field.validateMessage).to.equal('请输入活动名称');
               done();
             });
           });
@@ -284,7 +284,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="记住密码" prop="region">
+            <el-form-item label="记住密码" prop="region" ref="field">
               <el-select v-model="form.region" placeholder="请选择活动区域">
                 <el-option label="区域一" value="shanghai"></el-option>
                 <el-option label="区域二" value="beijing"></el-option>
@@ -311,15 +311,15 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.true;
         vm.setValue('');
         setTimeout(_ => {
-          expect(fields.region.validateMessage).to.equal('请选择活动区域');
+          expect(field.validateMessage).to.equal('请选择活动区域');
           vm.setValue('shanghai');
 
           setTimeout(_ => {
-            expect(fields.region.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             done();
           }, 100);
         }, 100);
@@ -329,7 +329,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="记住密码" prop="date">
+            <el-form-item label="记住密码" prop="date" ref="field">
               <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
             </el-form-item>
           </el-form>
@@ -353,15 +353,15 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.date.validateMessage).to.equal('请选择日期');
+          expect(field.validateMessage).to.equal('请选择日期');
 
           vm.setValue(new Date());
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.date.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             done();
           });
         });
@@ -371,7 +371,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="记住密码" prop="date">
+            <el-form-item label="记住密码" prop="date" ref="field">
               <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
             </el-form-item>
           </el-form>
@@ -395,14 +395,14 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.date.validateMessage).to.equal('请选择时间');
+          expect(field.validateMessage).to.equal('请选择时间');
           vm.setValue(new Date());
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.date.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             done();
           });
         });
@@ -412,7 +412,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="type">
+            <el-form-item label="活动名称" prop="type" ref="field">
               <el-checkbox-group v-model="form.type">
                 <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                 <el-checkbox label="地推活动" name="type"></el-checkbox>
@@ -441,14 +441,14 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.type.validateMessage).to.equal('请选择活动类型');
+          expect(field.validateMessage).to.equal('请选择活动类型');
           vm.setValue(['地推活动']);
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.type.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             done();
           });
         });
@@ -458,7 +458,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="type">
+            <el-form-item label="活动名称" prop="type" ref="field">
               <el-radio-group v-model="form.type">
                 <el-radio label="线上品牌商赞助"></el-radio>
                 <el-radio label="线下场地免费"></el-radio>
@@ -485,14 +485,14 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.type.validateMessage).to.equal('请选择活动类型');
+          expect(field.validateMessage).to.equal('请选择活动类型');
           vm.setValue('线下场地免费');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.type.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             done();
           });
         });
@@ -502,7 +502,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="name">
+            <el-form-item label="活动名称" prop="name" ref="field">
               <el-input v-model="form.name"></el-input>
             </el-form-item>
           </el-form>
@@ -541,7 +541,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="name">
+            <el-form-item label="活动名称" prop="name" ref="field">
               <el-input v-model="form.name"></el-input>
             </el-form-item>
           </el-form>
@@ -565,14 +565,14 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.not.true;
         vm.$refs.form.$nextTick(_ => {
-          expect(fields.name.validateMessage).to.equal('长度至少为5');
+          expect(field.validateMessage).to.equal('长度至少为5');
           vm.setValue('aaaaaa');
 
           vm.$refs.form.$nextTick(_ => {
-            expect(fields.name.validateMessage).to.equal('');
+            expect(field.validateMessage).to.equal('');
             done();
           });
         });
@@ -582,7 +582,7 @@ describe('Form', () => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
-            <el-form-item label="活动名称" prop="name" :error="error" ref="formitem">
+            <el-form-item label="活动名称" prop="name" :error="error" ref="field">
               <el-input v-model="form.name"></el-input>
             </el-form-item>
           </el-form>
@@ -607,13 +607,13 @@ describe('Form', () => {
         }
       }, true);
       vm.$refs.form.validate(valid => {
-        let fields = vm.$refs.form.fields;
+        let field = vm.$refs.field;
         expect(valid).to.true;
         vm.error = '输入不合法';
 
-        vm.$refs.formitem.$nextTick(_ => {
-          expect(fields.name.validateState).to.equal('error');
-          expect(fields.name.validateMessage).to.equal('输入不合法');
+        vm.$refs.field.$nextTick(_ => {
+          expect(field.validateState).to.equal('error');
+          expect(field.validateMessage).to.equal('输入不合法');
           done();
         });
       });