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);