Form: fix switching the rules in el-form not work (#14985) (#15017)

packages/form/src/form-item.vue

@@ -19,9 +19,9 @@
     <div class="el-form-item__content" :style="contentStyle">
       <slot></slot>
       <transition name="el-zoom-in-top">
-        <slot 
+        <slot
-          v-if="validateState === 'error' && showMessage && form.showMessage" 
+          v-if="validateState === 'error' && showMessage && form.showMessage"
-          name="error" 
+          name="error"
           :error="validateMessage">
           <div
             class="el-form-item__error"
@@ -279,6 +279,17 @@
       },
       updateComputedLabelWidth(width) {
         this.computedLabelWidth = width ? `${width}px` : '';
+      },
+      addValidateEvents() {
+        const rules = this.getRules();
+
+        if (rules.length || this.required !== undefined) {
+          this.$on('el.form.blur', this.onFieldBlur);
+          this.$on('el.form.change', this.onFieldChange);
+        }
+      },
+      removeValidateEvents() {
+        this.$off();
       }
     },
     mounted() {
@@ -293,12 +304,7 @@
           value: initialValue
         });
 
-        let rules = this.getRules();
+        this.addValidateEvents();
-
-        if (rules.length || this.required !== undefined) {
-          this.$on('el.form.blur', this.onFieldBlur);
-          this.$on('el.form.change', this.onFieldChange);
-        }
       }
     },
     beforeDestroy() {

packages/form/src/form.vue

@@ -49,6 +49,12 @@
     },
     watch: {
       rules() {
+        // remove then add event listeners on form-item after form rules change
+        this.fields.forEach(field => {
+          field.removeValidateEvents();
+          field.addValidateEvents();
+        });
+
         if (this.validateOnRuleChange) {
           this.validate(() => {});
         }