Form: add disabled

examples/docs/en-US/form.md

@@ -841,7 +841,9 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | show-message  | whether to show the error message | boolean | — | true |
 | inline-message  | whether to display the error message inline with the form item | boolean | — | false |
 | status-icon  | whether to display an icon indicating the validation result | boolean | — | false |
-| size  | control the size of components in this form | string | medium / small / mini | - |
+| validate-on-rule-change  | whether to trigger validation when the `rules` prop is changed | boolean | — | true |
+| size  | control the size of components in this form | string | medium / small / mini | — |
+| disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |
 
 ### Form Methods
 

examples/docs/es/form.md

@@ -846,7 +846,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | show-message   | si mostrar o no el mensaje de error      | boolean | —                     | true        |
 | inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | —                     | false       |
 | status-icon    | si desea visualizar un icono que indique el resultado de la validación | boolean | —                     | false       |
-| size           | el tamaño de los componentes en este form | string  | medium / small / mini | -           |
+| validate-on-rule-change  | whether to trigger validation when the `rules` prop is changed | boolean | — | true |
+| size           | el tamaño de los componentes en este form | string  | medium / small / mini | —           |
+| disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |
 
 ### Form Metodos
 

examples/docs/zh-CN/form.md

@@ -829,7 +829,9 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 | inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
 | status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
-| size  | 用于控制该表单内组件的尺寸 | string | medium / small / mini | - |
+| validate-on-rule-change  | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true |
+| size  | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
+| disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
 
 ### Form Methods
 

packages/cascader/src/main.vue

@@ -4,7 +4,7 @@
     :class="[
       {
         'is-opened': menuVisible,
-        'is-disabled': disabled
+        'is-disabled': cascaderDisabled
       },
       cascaderSize ? 'el-cascader--' + cascaderSize : ''
     ]"
@@ -27,7 +27,7 @@
       @blur="handleBlur"
       :validate-event="false"
       :size="size"
-      :disabled="disabled"
+      :disabled="cascaderDisabled"
     >
       <template slot="suffix">
         <i
@@ -95,6 +95,9 @@ export default {
   mixins: [popperMixin, emitter, Locale],
 
   inject: {
+    elForm: {
+      default: ''
+    },
     elFormItem: {
       default: ''
     }
@@ -207,6 +210,9 @@ export default {
     cascaderSize() {
       return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
     },
+    cascaderDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
     id() {
       return generateId();
     }
@@ -380,7 +386,7 @@ export default {
       this.menuVisible = false;
     },
     handleClick() {
-      if (this.disabled) return;
+      if (this.cascaderDisabled) return;
       this.$refs.input.focus();
       if (this.filterable) {
         this.menuVisible = true;

packages/checkbox/src/checkbox-button.vue

@@ -52,6 +52,9 @@
     mixins: [Emitter],
 
     inject: {
+      elForm: {
+        default: ''
+      },
       elFormItem: {
         default: ''
       }
@@ -149,8 +152,8 @@
 
       isDisabled() {
         return this._checkboxGroup
-          ? this._checkboxGroup.disabled || this.disabled
-          : this.disabled;
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).disabled;
       }
     },
     methods: {

packages/checkbox/src/checkbox.vue

@@ -61,6 +61,9 @@
     mixins: [Emitter],
 
     inject: {
+      elForm: {
+        default: ''
+      },
       elFormItem: {
         default: ''
       }
@@ -133,8 +136,8 @@
 
       isDisabled() {
         return this.isGroup
-          ? this._checkboxGroup.disabled || this.disabled
-          : this.disabled;
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).disabled;
       },
 
       _elFormItemSize() {

packages/color-picker/src/main.vue

@@ -2,11 +2,11 @@
   <div
     :class="[
       'el-color-picker',
-      disabled ? 'is-disabled' : '',
+      colorDisabled ? 'is-disabled' : '',
       colorSize ? `el-color-picker--${ colorSize }` : ''
     ]"
     v-clickoutside="hide">
-    <div class="el-color-picker__mask" v-if="disabled"></div>
+    <div class="el-color-picker__mask" v-if="colorDisabled"></div>
     <div class="el-color-picker__trigger" @click="handleTrigger">
       <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
         <span class="el-color-picker__color-inner"
@@ -47,6 +47,9 @@
     },
 
     inject: {
+      elForm: {
+        default: ''
+      },
       elFormItem: {
         default: ''
       }
@@ -72,6 +75,10 @@
 
       colorSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      colorDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
 
@@ -96,7 +103,7 @@
 
     methods: {
       handleTrigger() {
-        if (this.disabled) return;
+        if (this.colorDisabled) return;
         this.showPicker = !this.showPicker;
       },
       confirmValue(value) {

packages/date-picker/src/picker.vue

@@ -3,7 +3,7 @@
     class="el-date-editor"
     :class="'el-date-editor--' + type"
     :readonly="!editable || readonly"
-    :disabled="disabled"
+    :disabled="pickerDisabled"
     :size="pickerSize"
     :id="id"
     :name="name"
@@ -32,7 +32,7 @@
     :class="[
       'el-date-editor--' + type,
       pickerSize ? `el-range-editor--${ pickerSize }` : '',
-      disabled ? 'is-disabled' : '',
+      pickerDisabled ? 'is-disabled' : '',
       pickerVisible ? 'is-active' : ''
     ]"
     @click="handleRangeClick"
@@ -46,7 +46,7 @@
     <input
       :placeholder="startPlaceholder"
       :value="displayValue && displayValue[0]"
-      :disabled="disabled"
+      :disabled="pickerDisabled"
       :id="id && id[0]"
       :readonly="!editable || readonly"
       :name="name && name[0]"
@@ -58,7 +58,7 @@
     <input
       :placeholder="endPlaceholder"
       :value="displayValue && displayValue[1]"
-      :disabled="disabled"
+      :disabled="pickerDisabled"
       :id="id && id[1]"
       :readonly="!editable || readonly"
       :name="name && name[1]"
@@ -298,6 +298,9 @@ export default {
   mixins: [Emitter, NewPopper],
 
   inject: {
+    elForm: {
+      default: ''
+    },
     elFormItem: {
       default: ''
     }
@@ -364,7 +367,7 @@ export default {
 
   watch: {
     pickerVisible(val) {
-      if (this.readonly || this.disabled) return;
+      if (this.readonly || this.pickerDisabled) return;
       if (val) {
         this.showPicker();
         this.valueOnOpen = this.value;
@@ -481,6 +484,10 @@ export default {
 
     pickerSize() {
       return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+
+    pickerDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
     }
   },
 
@@ -537,7 +544,7 @@ export default {
     },
 
     handleMouseEnter() {
-      if (this.readonly || this.disabled) return;
+      if (this.readonly || this.pickerDisabled) return;
       if (!this.valueIsEmpty && this.clearable) {
         this.showClose = true;
       }
@@ -604,7 +611,7 @@ export default {
     },
 
     handleClickIcon(event) {
-      if (this.readonly || this.disabled) return;
+      if (this.readonly || this.pickerDisabled) return;
       if (this.showClose) {
         event.stopPropagation();
         this.emitInput(null);

packages/form/src/form.vue

@@ -35,6 +35,7 @@
         default: true
       },
       size: String,
+      disabled: Boolean,
       validateOnRuleChange: {
         type: Boolean,
         default: true

packages/input-number/src/input-number.vue

@@ -2,7 +2,7 @@
   <div class="el-input-number"
     :class="[
       inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
-      { 'is-disabled': disabled },
+      { 'is-disabled': inputNumberDisabled },
       { 'is-without-controls': !controls },
       { 'is-controls-right': controlsAtRight }
     ]"
@@ -30,7 +30,7 @@
     <el-input
       ref="input"
       :value="currentValue"
-      :disabled="disabled"
+      :disabled="inputNumberDisabled"
       :size="inputNumberSize"
       :max="max"
       :min="min"
@@ -60,6 +60,9 @@
     name: 'ElInputNumber',
     mixins: [Focus('input')],
     inject: {
+      elForm: {
+        default: ''
+      },
       elFormItem: {
         default: ''
       }
@@ -134,6 +137,9 @@
       },
       inputNumberSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      inputNumberDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
     methods: {
@@ -166,13 +172,13 @@
         return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);
       },
       increase() {
-        if (this.disabled || this.maxDisabled) return;
+        if (this.inputNumberDisabled || this.maxDisabled) return;
         const value = this.value || 0;
         const newVal = this._increase(value, this.step);
         this.setCurrentValue(newVal);
       },
       decrease() {
-        if (this.disabled || this.minDisabled) return;
+        if (this.inputNumberDisabled || this.minDisabled) return;
         const value = this.value || 0;
         const newVal = this._decrease(value, this.step);
         this.setCurrentValue(newVal);
@@ -209,7 +215,7 @@
       innerInput.setAttribute('aria-valuemax', this.max);
       innerInput.setAttribute('aria-valuemin', this.min);
       innerInput.setAttribute('aria-valuenow', this.currentValue);
-      innerInput.setAttribute('aria-disabled', this.disabled);
+      innerInput.setAttribute('aria-disabled', this.inputNumberDisabled);
     },
     updated() {
       let innerInput = this.$refs.input.$refs.input;

packages/input/src/input.vue

@@ -3,7 +3,7 @@
     type === 'textarea' ? 'el-textarea' : 'el-input',
     inputSize ? 'el-input--' + inputSize : '',
     {
-      'is-disabled': disabled,
+      'is-disabled': inputDisabled,
       'el-input-group': $slots.prepend || $slots.append,
       'el-input-group--append': $slots.append,
       'el-input-group--prepend': $slots.prepend,
@@ -16,7 +16,7 @@
   >
     <template v-if="type !== 'textarea'">
       <!-- 前置元素 -->
-      <div class="el-input-group__prepend" v-if="$slots.prepend"  tabindex="0">
+      <div class="el-input-group__prepend" v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </div>
       <input
@@ -24,6 +24,7 @@
         v-if="type !== 'textarea'"
         class="el-input__inner"
         v-bind="$props"
+        :disabled="inputDisabled"
         :autocomplete="autoComplete"
         :value="currentValue"
         ref="input"
@@ -77,6 +78,7 @@
       @input="handleInput"
       ref="textarea"
       v-bind="$props"
+      :disabled="inputDisabled"
       :style="textareaStyle"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -188,6 +190,9 @@
       inputSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
+      inputDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
       isGroup() {
         return this.$slots.prepend || this.$slots.append;
       },

packages/radio/src/radio-button.vue

@@ -40,6 +40,9 @@
     mixins: [Emitter],
 
     inject: {
+      elForm: {
+        default: ''
+      },
       elFormItem: {
         default: ''
       }
@@ -90,7 +93,7 @@
         return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
       isDisabled() {
-        return this.disabled || this._radioGroup.disabled;
+        return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled;
       },
       tabIndex() {
         return !this.isDisabled ? (this._radioGroup ? (this.value === this.label ? 0 : -1) : 0) : -1;

packages/radio/src/radio.vue

@@ -49,6 +49,10 @@
     mixins: [Emitter],
 
     inject: {
+      elForm: {
+        default: ''
+      },
+
       elFormItem: {
         default: ''
       }
@@ -106,8 +110,8 @@
       },
       isDisabled() {
         return this.isGroup
-          ? this._radioGroup.disabled || this.disabled
-          : this.disabled;
+          ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).disabled;
       },
       tabIndex() {
         return !this.isDisabled ? (this.isGroup ? (this.model === this.label ? 0 : -1) : 0) : -1;

packages/rate/src/main.vue

@@ -14,7 +14,7 @@
       @mousemove="setCurrentValue(item, $event)"
       @mouseleave="resetCurrentValue"
       @click="selectValue(item)"
-      :style="{ cursor: disabled ? 'auto' : 'pointer' }">
+      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }">
       <i
         :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
         class="el-rate__icon"
@@ -40,6 +40,12 @@
 
     mixins: [Migrating],
 
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+
     data() {
       return {
         classMap: {},
@@ -130,7 +136,7 @@
       text() {
         let result = '';
         if (this.showScore) {
-          result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.disabled
+          result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
             ? this.value
             : this.currentValue);
         } else if (this.showText) {
@@ -141,7 +147,7 @@
 
       decimalStyle() {
         let width = '';
-        if (this.disabled) {
+        if (this.rateDisabled) {
           width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
         }
         if (this.allowHalf) {
@@ -162,7 +168,7 @@
       },
 
       voidClass() {
-        return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
+        return this.rateDisabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
       },
 
       activeClass() {
@@ -197,6 +203,10 @@
           result.push(this.voidClass);
         }
         return result;
+      },
+
+      rateDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
 
@@ -229,7 +239,7 @@
       },
 
       showDecimalIcon(item) {
-        let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
+        let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
         /* istanbul ignore next */
         let showWhenAllowHalf = this.allowHalf &&
           this.pointerAtLeftHalf &&
@@ -239,14 +249,14 @@
       },
 
       getIconStyle(item) {
-        const voidColor = this.disabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
+        const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
         return {
           color: item <= this.currentValue ? this.activeColor : voidColor
         };
       },
 
       selectValue(value) {
-        if (this.disabled) {
+        if (this.rateDisabled) {
           return;
         }
         if (this.allowHalf && this.pointerAtLeftHalf) {
@@ -286,7 +296,7 @@
       },
 
       setCurrentValue(value, event) {
-        if (this.disabled) {
+        if (this.rateDisabled) {
           return;
         }
         /* istanbul ignore if */
@@ -307,7 +317,7 @@
       },
 
       resetCurrentValue() {
-        if (this.disabled) {
+        if (this.rateDisabled) {
           return;
         }
         if (this.allowHalf) {

packages/select/src/select.vue

@@ -11,7 +11,7 @@
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
       <span v-if="collapseTags && selected.length">
         <el-tag
-          :closable="!disabled"
+          :closable="!selectDisabled"
           :size="collapseTagSize"
           :hit="selected[0].hitState"
           type="info"
@@ -32,7 +32,7 @@
         <el-tag
           v-for="item in selected"
           :key="getValueKey(item)"
-          :closable="!disabled"
+          :closable="!selectDisabled"
           :size="collapseTagSize"
           :hit="item.hitState"
           type="info"
@@ -46,7 +46,7 @@
         type="text"
         class="el-select__input"
         :class="[selectSize ? `is-${ selectSize }` : '']"
-        :disabled="disabled"
+        :disabled="selectDisabled"
         :autocomplete="autoComplete"
         @focus="handleFocus"
         @click.stop
@@ -73,7 +73,7 @@
       :id="id"
       :auto-complete="autoComplete"
       :size="selectSize"
-      :disabled="disabled"
+      :disabled="selectDisabled"
       :readonly="!filterable || multiple"
       :validate-event="false"
       :class="{ 'is-focus': visible }"
@@ -154,6 +154,10 @@
     componentName: 'ElSelect',
 
     inject: {
+      elForm: {
+        default: ''
+      },
+
       elFormItem: {
         default: ''
       }
@@ -171,7 +175,7 @@
       },
       iconClass() {
         let criteria = this.clearable &&
-          !this.disabled &&
+          !this.selectDisabled &&
           this.inputHovering &&
           !this.multiple &&
           this.value !== undefined &&
@@ -208,6 +212,10 @@
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
 
+      selectDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
+
       collapseTagSize() {
         return ['small', 'mini'].indexOf(this.selectSize) > -1
           ? 'mini'
@@ -291,7 +299,7 @@
     },
 
     watch: {
-      disabled() {
+      selectDisabled() {
         this.$nextTick(() => {
           this.resetInputHeight();
         });
@@ -652,7 +660,7 @@
       },
 
       toggleMenu() {
-        if (!this.disabled) {
+        if (!this.selectDisabled) {
           this.visible = !this.visible;
           if (this.visible) {
             (this.$refs.input || this.$refs.reference).focus();
@@ -676,7 +684,7 @@
 
       deleteTag(event, tag) {
         let index = this.selected.indexOf(tag);
-        if (index > -1 && !this.disabled) {
+        if (index > -1 && !this.selectDisabled) {
           const value = this.value.slice();
           value.splice(index, 1);
           this.$emit('input', value);

packages/slider/src/button.vue

@@ -60,7 +60,7 @@
 
     computed: {
       disabled() {
-        return this.$parent.disabled;
+        return this.$parent.sliderDisabled;
       },
 
       max() {

packages/slider/src/main.vue

@@ -5,7 +5,7 @@
      :aria-valuemin="min"
      :aria-valuemax="max"
      :aria-orientation="vertical ? 'vertical': 'horizontal'"
-     :aria-disabled="disabled"
+     :aria-disabled="sliderDisabled"
   >
     <el-input-number
       v-model="firstValue"
@@ -14,7 +14,7 @@
       ref="input"
       @change="$nextTick(emitChange)"
       :step="step"
-      :disabled="disabled"
+      :disabled="sliderDisabled"
       :controls="showInputControls"
       :min="min"
       :max="max"
@@ -22,7 +22,7 @@
       size="small">
     </el-input-number>
     <div class="el-slider__runway"
-      :class="{ 'show-input': showInput, 'disabled': disabled }"
+      :class="{ 'show-input': showInput, 'disabled': sliderDisabled }"
       :style="runwayStyle"
       @click="onSliderClick"
       ref="slider">
@@ -61,6 +61,12 @@
 
     mixins: [Emitter],
 
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+
     props: {
       min: {
         type: Number,
@@ -233,7 +239,7 @@
       },
 
       onSliderClick(event) {
-        if (this.disabled || this.dragging) return;
+        if (this.sliderDisabled || this.dragging) return;
         this.resetSize();
         if (this.vertical) {
           const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
@@ -323,6 +329,10 @@
             width: this.barSize,
             left: this.barStart
           };
+      },
+
+      sliderDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
 

packages/switch/src/component.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     class="el-switch"
-    :class="{ 'is-disabled': disabled, 'is-checked': checked }"
+    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
     role="switch"
     :aria-checked="checked"
-    :aria-disabled="disabled"
+    :aria-disabled="switchDisabled"
     @click="switchValue"
   >
     <input
@@ -15,7 +15,7 @@
       :name="name"
       :true-value="activeValue"
       :false-value="inactiveValue"
-      :disabled="disabled"
+      :disabled="switchDisabled"
       @keydown.enter="switchValue"
     >
     <span
@@ -42,6 +42,11 @@
   export default {
     name: 'ElSwitch',
     mixins: [Focus('input'), Migrating],
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
     props: {
       value: {
         type: [Boolean, String, Number],
@@ -102,6 +107,9 @@
       },
       transform() {
         return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
+      },
+      switchDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
     watch: {

packages/theme-chalk/src/slider.scss

@@ -86,6 +86,7 @@
     background-color: transparent;
     text-align: center;
     user-select: none;
+    line-height: normal;
     @include utils-vertical-center;
 
     .el-tooltip {

packages/upload/src/index.vue

@@ -23,6 +23,12 @@ export default {
     uploader: this
   },
 
+  inject: {
+    elForm: {
+      default: ''
+    }
+  },
+
   props: {
     action: {
       type: String,
@@ -109,6 +115,12 @@ export default {
     };
   },
 
+  computed: {
+    uploadDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    }
+  },
+
   watch: {
     fileList: {
       immediate: true,
@@ -235,7 +247,7 @@ export default {
     if (this.showFileList) {
       uploadList = (
         <UploadList
-          disabled={this.disabled}
+          disabled={this.uploadDisabled}
           listType={this.listType}
           files={this.uploadFiles}
           on-remove={this.handleRemove}
@@ -259,7 +271,7 @@ export default {
         fileList: this.uploadFiles,
         autoUpload: this.autoUpload,
         listType: this.listType,
-        disabled: this.disabled,
+        disabled: this.uploadDisabled,
         limit: this.limit,
         'on-exceed': this.onExceed,
         'on-start': this.handleStart,

types/form.d.ts

@@ -31,6 +31,9 @@ export declare class ElForm extends ElementUIComponent {
   /** Whether the form is inline */
   inline: boolean
 
+  /** Whether the form is disabled */
+  disabled: boolean
+
   /** Position of label */
   labelPosition: FormItemLabelPosition
 
@@ -49,6 +52,9 @@ export declare class ElForm extends ElementUIComponent {
   /** Whether to display an icon indicating the validation result */
   statusIcon: boolean
 
+  /** Whether to trigger validation when the `rules` prop is changed */
+  validateOnRuleChange: boolean
+
   /** Controls the size of components in this form */
   size: ElementUIComponentSize