Form: fix validate state

examples/docs/en-US/form.md

@@ -5,6 +5,7 @@
         if (!value) {
           return callback(new Error('Please input the age'));
         }
+        setTimeout(() => {
           if (!Number.isInteger(value)) {
             callback(new Error('Please input digits'));
           } else {
@@ -14,6 +15,7 @@
               callback();
             }
           }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {
@@ -338,7 +340,8 @@ When the vertical space is limited and the form is relatively simple, you can pu
       <el-option label="Zone one" value="shanghai"></el-option>
       <el-option label="Zone two" value="beijing"></el-option>
     </el-select>
-  </el-form-item><el-form-item>
+  </el-form-item>
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">Query</el-button>
   </el-form-item>
 </el-form>
@@ -546,6 +549,7 @@ This example shows how to customize your own validation rules to finish a two-fa
         if (!value) {
           return callback(new Error('Please input the age'));
         }
+        setTimeout(() => {
           if (!Number.isInteger(value)) {
             callback(new Error('Please input digits'));
           } else {
@@ -555,6 +559,7 @@ This example shows how to customize your own validation rules to finish a two-fa
               callback();
             }
           }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {

examples/docs/zh-CN/form.md

@@ -5,6 +5,7 @@
         if (!value) {
           return callback(new Error('年龄不能为空'));
         }
+        setTimeout(() => {
           if (!Number.isInteger(value)) {
             callback(new Error('请输入数字值'));
           } else {
@@ -14,6 +15,7 @@
               callback();
             }
           }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {
@@ -331,7 +333,8 @@
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
-  </el-form-item><el-form-item>
+  </el-form-item>
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">查询</el-button>
   </el-form-item>
 </el-form>
@@ -537,6 +540,7 @@
         if (!value) {
           return callback(new Error('年龄不能为空'));
         }
+        setTimeout(() => {
           if (!Number.isInteger(value)) {
             callback(new Error('请输入数字值'));
           } else {
@@ -546,6 +550,7 @@
               callback();
             }
           }
+        }, 1000);
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {

packages/form/src/form-item.vue

@@ -53,7 +53,10 @@
       label: String,
       labelWidth: String,
       prop: String,
-      required: Boolean,
+      required: {
+        type: Boolean,
+        default: undefined
+      },
       rules: [Object, Array],
       error: String,
       validateStatus: String,
@@ -165,7 +168,7 @@
       validate(trigger, callback = noop) {
         this.validateDisabled = false;
         var rules = this.getFilteredRule(trigger);
-        if ((!rules || rules.length === 0) && !this._props.hasOwnProperty('required')) {
+        if ((!rules || rules.length === 0) && this.required === undefined) {
           callback();
           return true;
         }
@@ -216,7 +219,7 @@
       getRules() {
         var formRules = this.form.rules;
         var selfRules = this.rules;
-        var requiredRule = this._props.hasOwnProperty('required') ? { required: !!this.required } : [];
+        var requiredRule = this.required !== undefined ? { required: !!this.required } : [];
 
         formRules = formRules ? formRules[this.prop] : [];
 
@@ -255,7 +258,7 @@
 
         let rules = this.getRules();
 
-        if (rules.length || this._props.hasOwnProperty('required')) {
+        if (rules.length || this.required !== undefined) {
           this.$on('el.form.blur', this.onFieldBlur);
           this.$on('el.form.change', this.onFieldChange);
         }