mirror of https://github.com/ElemeFE/element
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.mdpull/12790/head
Yamen Sharaf
hetech
parent
1cbc9f6363
commit
098ba463c3
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 : ''
|
||||
]">
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@
|
|||
validateOnRuleChange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hideRequiredAsterisk: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue