FormItem: adding hide-required-asterisk attribute(#12744)

* Form: adds prop to make asterisk optional on required  fields

* Form: adds prop to make asterisk optional on required  fields

* ElForm: Reverses attribute name to hide-required-asterisk, which defaults to false

* Update form-item.vue

* Update form.scss

* Update form.md

examples/docs/en-US/form.md

@@ -838,6 +838,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |
 | label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
+| hide-required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | false |
 | 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 |

examples/docs/es/form.md

@@ -844,19 +844,20 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 
 ### Form Atributos
 
-| Atributo                | Descripción                                                                                                                                          | Tipo    | Valores aceptados     | Por defecto |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | ----------- |
-| model                   | Datos del componente                                                                                                                                 | object  | —                     | —           |
-| rules                   | Reglas de validación                                                                                                                                 | object  | —                     | —           |
-| inline                  | Si el form es inline                                                                                                                                 | boolean | —                     | false       |
-| label-position          | Posicion de la etiqueta. Si esta 'left' o 'right', también se necesita el prop `label-width`                                                         | string  | left / right / top    | right       |
-| label-width             | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor                                                             | string  | —                     | —           |
-| label-suffix            | sufijo de la etiqueta                                                                                                                                | string  | —                     | —           |
-| 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       |
-| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia                                                                                            | boolean | —                     | true        |
-| size                    | el tamaño de los componentes en este form                                                                                                            | string  | medium / small / mini | —           |
+| Atributo                | Descripción                              | Tipo    | Valores aceptados     | Por defecto |
+| ----------------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
+| model                   | Datos del componente                     | object  | —                     | —           |
+| rules                   | Reglas de validación                     | object  | —                     | —           |
+| inline                  | Si el form es inline                     | boolean | —                     | false       |
+| label-position          | Posicion de la etiqueta                  | string  | left / right / top    | right       |
+| label-width             | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string  | —                     | —           |
+| label-suffix            | sufijo de la etiqueta                    | string  | —                     | —           |
+| hide-required-asterisk       | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
+| 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       |
+| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | —                     | true        |
+| size                    | el tamaño de los componentes en este form | string  | medium / small / mini | —           |
 | disabled                | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | —                     | false       |
 
 ### Form Metodos

examples/docs/zh-CN/form.md

@@ -826,6 +826,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string |  right/left/top            | right |
 | label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
+| hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 | inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
 | status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |

packages/form/src/form-item.vue

@@ -4,7 +4,8 @@
       'is-error': validateState === 'error',
       'is-validating': validateState === 'validating',
       'is-success': validateState === 'success',
-      'is-required': isRequired || required
+      'is-required': isRequired || required,
+      'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
     },
     sizeClass ? 'el-form-item--' + sizeClass : ''
   ]">

packages/form/src/form.vue

@@ -41,6 +41,10 @@
       validateOnRuleChange: {
         type: Boolean,
         default: true
+      },
+      hideRequiredAsterisk: {
+        type: Boolean,
+        default: false
       }
     },
     watch: {

packages/theme-chalk/src/form.scss

@@ -123,10 +123,12 @@
   }
 
   @include when(required) {
-    & > .el-form-item__label:before {
-      content: '*';
-      color: $--color-danger;
-      margin-right: 4px;
+    @include pseudo('not(.is-no-asterisk)') {
+      & > .el-form-item__label:before {
+        content: '*';
+        color: $--color-danger;
+        margin-right: 4px;
+      }
     }
   }