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

This commit is contained in:
luckyCao 2019-04-19 15:17:45 +08:00 committed by hetech
parent 3f0820d839
commit 5425dc69fe
2 changed files with 21 additions and 9 deletions

View File

@ -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() {

View File

@ -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(() => {});
}