Form: add clearValidate (#7623)

* Form: add clearValidate

* remove dup attrs

examples/docs/en-US/form.md

@@ -47,6 +47,16 @@
           resource: '',
           desc: ''
         },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
         formInline: {
           user: '',
           region: ''
@@ -745,33 +755,33 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 
 ::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
 ```html
-<el-form ref="form" :model="form" label-width="120px" size="mini">
+<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
   <el-form-item label="Activity name">
-    <el-input v-model="form.name"></el-input>
+    <el-input v-model="sizeForm.name"></el-input>
   </el-form-item>
   <el-form-item label="Activity zone">
-    <el-select v-model="form.region" placeholder="please select your zone">
+    <el-select v-model="sizeForm.region" placeholder="please select your zone">
       <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 label="Activity time">
     <el-col :span="11">
-      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="Activity type">
-    <el-checkbox-group v-model="form.type">
+    <el-checkbox-group v-model="sizeForm.type">
       <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
       <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
     </el-checkbox-group>
   </el-form-item>
   <el-form-item label="Resources">
-    <el-radio-group v-model="form.resource" size="medium">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
       <el-radio border label="Sponsor"></el-radio>
       <el-radio border label="Venue"></el-radio>
     </el-radio-group>
@@ -781,6 +791,30 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
     <el-button>Cancel</el-button>
   </el-form-item>
 </el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
 ```
 :::
 
@@ -806,6 +840,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) |
 | validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
 | resetFields | reset all the fields and remove validation result | — |
+| clearValidate | clear validation message for all fields | -
 
 ### Form-Item Attributes
 

examples/docs/zh-CN/form.md

@@ -47,6 +47,16 @@
           resource: '',
           desc: ''
         },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
         formInline: {
           user: '',
           region: ''
@@ -734,34 +744,34 @@
 
 ::: demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
 ```html
-<el-form ref="form" :model="form" label-width="80px" size="mini">
+<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
   <el-form-item label="活动名称">
-    <el-input v-model="form.name"></el-input>
+    <el-input v-model="sizeForm.name"></el-input>
   </el-form-item>
   <el-form-item label="活动区域">
-    <el-select v-model="form.region" placeholder="请选择活动区域">
+    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
   </el-form-item>
   <el-form-item label="活动时间">
     <el-col :span="11">
-      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="活动性质">
-    <el-checkbox-group v-model="form.type">
+    <el-checkbox-group v-model="sizeForm.type">
       <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
       <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
       <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
     </el-checkbox-group>
   </el-form-item>
   <el-form-item label="特殊资源">
-    <el-radio-group v-model="form.resource" size="medium">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
       <el-radio border label="线上品牌商赞助"></el-radio>
       <el-radio border label="线下场地免费"></el-radio>
     </el-radio-group>
@@ -771,6 +781,30 @@
     <el-button>取消</el-button>
   </el-form-item>
 </el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
 ```
 :::
 
@@ -796,6 +830,7 @@
 | validate | 对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean))
 | validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
 | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
+| clearValidate | 移除整个表单的校验结果 | -
 
 ### Form-Item Attributes
 

packages/form/src/form-item.vue

@@ -8,7 +8,7 @@
     },
     sizeClass ? 'el-form-item--' + sizeClass : ''
   ]">
-    <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
+    <label :for="labelFor" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
       <slot name="label">{{label + form.labelSuffix}}</slot>
     </label>
     <div class="el-form-item__content" v-bind:style="contentStyle">
@@ -102,6 +102,9 @@
       }
     },
     computed: {
+      labelFor() {
+        return this.for || this.prop;
+      },
       labelStyle() {
         var ret = {};
         if (this.form.labelPosition === 'top') return ret;
@@ -207,6 +210,11 @@
           callback(this.validateMessage);
         });
       },
+      clearValidate() {
+        this.validateState = '';
+        this.validateMessage = '';
+        this.validateDisabled = false;
+      },
       resetField() {
         this.validateState = '';
         this.validateMessage = '';

packages/form/src/form.vue

@@ -70,6 +70,11 @@
           field.resetField();
         });
       },
+      clearValidate() {
+        this.fields.forEach(field => {
+          field.clearValidate();
+        });
+      },
       validate(callback) {
         if (!this.model) {
           console.warn('[Element Warn][Form]model is required for validate to work!');

packages/input/src/input.vue

@@ -106,7 +106,6 @@
       placeholder: String,
       size: String,
       resize: String,
-      icon: String,
       name: String,
       form: String,
       id: String,
@@ -115,7 +114,6 @@
       readonly: Boolean,
       autofocus: Boolean,
       disabled: Boolean,
-      onIconClick: Function,
       type: {
         type: String,
         default: 'text'
@@ -139,7 +137,6 @@
         type: Boolean,
         default: true
       },
-      onIconClick: Function,
       suffixIcon: String,
       prefixIcon: String,
       label: String