Switch: trigger form validation if value changes (#14426)

* switch: trigger form validation if value changes

* add French translation

* fix doc

* trigger validation in watch handler

examples/docs/en-US/switch.md

@@ -139,28 +139,29 @@ Switch is used for switching between two opposing states.
 
 ### Attributes
 
- Attribute      | Description          | Type      | Accepted Values       | Default
-----| ----| ----| ----|----
-value / v-model | binding value | boolean / string / number | — | —
-disabled | whether Switch is disabled | boolean | — | false
-width | width of Switch | number | — | 40
-active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
-inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
-active-text | text displayed when in `on` state | string | — | —
-inactive-text | text displayed when in `off` state | string | — | —
-active-value  | switch value when in `on` state | boolean / string / number | — | true
-inactive-value  | switch value when in `off` state | boolean / string / number | — | false
-active-color | background color when in `on` state | string | — | #409EFF
-inactive-color | background color when in `off` state | string | — | #C0CCDA
-name| input name of Switch | string | — | —
+| Attribute      | Description          | Type      | Accepted Values       | Default |
+|-----| ----| ----| ----|---- |
+| value / v-model | binding value | boolean / string / number | — | — |
+| disabled | whether Switch is disabled | boolean | — | false |
+| width | width of Switch | number | — | 40 |
+| active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | — |
+| inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | — |
+| active-text | text displayed when in `on` state | string | — | — |
+| inactive-text | text displayed when in `off` state | string | — | — |
+| active-value  | switch value when in `on` state | boolean / string / number | — | true |
+| inactive-value  | switch value when in `off` state | boolean / string / number | — | false |
+| active-color | background color when in `on` state | string | — | #409EFF |
+| inactive-color | background color when in `off` state | string | — | #C0CCDA |
+| name           | input name of Switch | string | — | — |
+| validate-event | whether to trigger form validation | boolean | - | true |
 
 ### Events
 
- Event Name | Description | Parameters
----- | ----| ----
-change | triggers when value changes | value after changing
+| Event Name | Description | Parameters |
+| ---- | ----| ---- |
+| change | triggers when value changes | value after changing |
 
 ### Methods
-Method | Description | Parameters
-------|--------|-------
-focus | focus the Switch component | —
+| Method | Description | Parameters |
+| ------|--------|------- |
+| focus | focus the Switch component | — |

examples/docs/es/switch.md

@@ -154,6 +154,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 | active-color        | color de fondo cuando se encuentra en el estado `on` | string                    | —                 | #409EFF     |
 | inactive-color      | color de fondo cuando se encuentra en el estado `off` | string                    | —                 | #C0CCDA     |
 | name                | nombre de entrada del componente Switch  | string                    | —                 | —           |
+| validate-event      | si se debe lanzar la validación de formulario | boolean              | -                 | true        |
 
 ### Eventos
 

examples/docs/fr-FR/switch.md

@@ -141,29 +141,30 @@ Switch est utilisé pour choisir entre deux états opposés.
 
 ### Attributs
 
- Attribut      | Description          | Type      | Valeurs acceptées       | Défaut
-----| ----| ----| ----|----
-value / v-model | La valeur liée. | boolean / string / number | — | —
-disabled | Si le switch est désactivé. | boolean | — | false
-width | Largeur du switch. | number | — | 40
-active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | —
-inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | —
-active-text | Texte affiché dans l'état `on`. | string | — | —
-inactive-text | Texte affiché dans l'état `off`. | string | — | —
-active-value  | Valeur du switch dans l'état `on`. | boolean / string / number | — | true
-inactive-value  | Valeur du switch dans l'état `off`. | boolean / string / number | — | false
-active-color | Couleur de fond de l'état `on`. | string | — | #409EFF
-inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA
-name| Nom du champ d'input du switch. | string | — | —
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |
+| ----| ----| ----| ----|---- |
+| value / v-model | La valeur liée. | boolean / string / number | — | — |
+| disabled | Si le switch est désactivé. | boolean | — | false |
+| width | Largeur du switch. | number | — | 40 |
+| active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | — |
+| inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | — |
+| active-text | Texte affiché dans l'état `on`. | string | — | — |
+| inactive-text | Texte affiché dans l'état `off`. | string | — | — |
+| active-value  | Valeur du switch dans l'état `on`. | boolean / string / number | — | true |
+| inactive-value  | Valeur du switch dans l'état `off`. | boolean / string / number | — | false |
+| active-color | Couleur de fond de l'état `on`. | string | — | #409EFF |
+| inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA |
+| name| Nom du champ d'input du switch. | string | — | — |
+| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
 
 ### Évènements
 
- Nom | Description | Paramètres
----- | ----| ----
-change | Se déclenche quand la valeur change. | La valeur après changement.
+| Nom | Description | Paramètres |
+| ---- | ----| ---- |
+| change | Se déclenche quand la valeur change. | La valeur après changement. |
 
 ### Méthodes
 
-Méthode | Description | Paramètres
-------|--------|-------
-focus | Donne le focus au switch. | —
+| Méthode | Description | Paramètres |
+|-------|--------|------- |
+| focus | Donne le focus au switch. | — |

examples/docs/zh-CN/switch.md

@@ -153,7 +153,8 @@
 | inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |
 | active-color  | switch 打开时的背景色    | string   | — | #409EFF |
 | inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
-| name  | switch 对应的 name 属性    | string   | — | — |
+| name            | switch 对应的 name 属性    | string   | — | — |
+| validate-event  | 改变 switch 状态时是否触发表单的校验     | boolean   | - | true |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

packages/switch/src/component.vue

@@ -36,12 +36,13 @@
   </div>
 </template>
 <script>
+  import emitter from 'element-ui/src/mixins/emitter';
   import Focus from 'element-ui/src/mixins/focus';
   import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
     name: 'ElSwitch',
-    mixins: [Focus('input'), Migrating],
+    mixins: [Focus('input'), Migrating, emitter],
     inject: {
       elForm: {
         default: ''
@@ -90,6 +91,10 @@
         type: String,
         default: ''
       },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      },
       id: String
     },
     data() {
@@ -116,12 +121,16 @@
         if (this.activeColor || this.inactiveColor) {
           this.setBackgroundColor();
         }
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', [this.value]);
+        }
       }
     },
     methods: {
       handleChange(event) {
-        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
-        this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
+        const val = this.checked ? this.inactiveValue : this.activeValue;
+        this.$emit('input', val);
+        this.$emit('change', val);
         this.$nextTick(() => {
           // set input's checked property
           // in case parent refuses to change component's value

packages/theme-chalk/src/popover.scss

@@ -15,6 +15,7 @@
   text-align: justify;
   font-size: $--popover-font-size;
   box-shadow: $--box-shadow-light;
+  word-break: break-all;
 
   @include m(plain) {
     padding: $--popover-padding-large;

types/switch.d.ts

@@ -37,4 +37,7 @@ export declare class ElSwitch extends ElementUIComponent {
 
   /** Input name of Switch */
   name: string
+
+  /** Whether to trigger form validation */
+  validateEvent: boolean
 }