From 5425dc69fe6d89e17c57ba90950d8e6faf96bbdf Mon Sep 17 00:00:00 2001
From: luckyCao <cao.lei1031@163.com>
Date: Fri, 19 Apr 2019 15:17:45 +0800
Subject: [PATCH] Form: fix switching the rules in el-form not work (#14985)
 (#15017)

---
 packages/form/src/form-item.vue | 24 +++++++++++++++---------
 packages/form/src/form.vue      |  6 ++++++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
index 800dfc33..e9e3f0c5 100644
--- a/packages/form/src/form-item.vue
+++ b/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 
-          v-if="validateState === 'error' && showMessage && form.showMessage" 
-          name="error" 
+        <slot
+          v-if="validateState === 'error' && showMessage && form.showMessage"
+          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();
-
-        if (rules.length || this.required !== undefined) {
-          this.$on('el.form.blur', this.onFieldBlur);
-          this.$on('el.form.change', this.onFieldChange);
-        }
+        this.addValidateEvents();
       }
     },
     beforeDestroy() {
diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue
index d9e6e612..59ed4dfa 100644
--- a/packages/form/src/form.vue
+++ b/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(() => {});
         }