Skip to content

Form: adds prop to make red asterisk optional on required fields #12744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 17, 2018
Merged

Form: adds prop to make red asterisk optional on required fields #12744

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9dfd25d
Form: adds prop to make asterisk optional on required fields
YamenSharaf Sep 12, 2018
c0d746a
Form: adds prop to make asterisk optional on required fields
YamenSharaf Sep 12, 2018
01ce93f
ElForm: Reverses attribute name to hide-required-asterisk, which defa…
YamenSharaf Sep 17, 2018
16492d0
Merge remote-tracking branch 'origin/el-form-prop-optional-asterisk' …
YamenSharaf Sep 17, 2018
35008bb
Fixes conflicts
YamenSharaf Sep 17, 2018
a65bcc7
Update form-item.vue
ziyoung Sep 17, 2018
e39ce7b
Update form.scss
ziyoung Sep 17, 2018
322a72e
Update form.md
ziyoung Sep 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/docs/en-US/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -838,6 +838,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
| label-position | position of label | 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 | — | — |
| required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | true |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new attribute can be named as hide-required-asterisk which default value is false.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

| 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 |
Expand Down
1 change: 1 addition & 0 deletions examples/docs/es/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,6 +843,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| 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 | — | — |
| required-asterisk | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | true |
| 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 |
Expand Down
1 change: 1 addition & 0 deletions examples/docs/zh-CN/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -826,6 +826,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
| label-position | 表单域标签的位置 | string | right/left/top | right |
| label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |
| required-asterisk | 是否必填字段的标签旁边应该有一个红色的星号（星号）| boolean | — | true |
| show-message | 是否显示校验错误信息 | boolean | — | true |
| inline-message | 是否以行内形式展示校验信息 | boolean | — | false |
| status-icon | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
Expand Down
3 changes: 2 additions & 1 deletion packages/form/src/form-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
'is-error': validateState === 'error',
'is-validating': validateState === 'validating',
'is-success': validateState === 'success',
'is-required': isRequired || required
'is-required': isRequired || required,
'no-asterisk': elForm && elForm.requiredAsterisk === false
},
sizeClass ? 'el-form-item--' + sizeClass : ''
]">
Expand Down
4 changes: 4 additions & 0 deletions packages/form/src/form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@
validateOnRuleChange: {
type: Boolean,
default: true
},
requiredAsterisk: {
type: Boolean,
default: true
}
},
watch: {
Expand Down
10 changes: 6 additions & 4 deletions packages/theme-chalk/src/form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,12 @@
}

@include when(required) {
.el-form-item__label:before {
content: '*';
color: $--color-danger;
margin-right: 4px;
@include pseudo('not(.no-asterisk)') {
.el-form-item__label:before {
content: '*';
color: $--color-danger;
margin-right: 4px;
}
}
}

Expand Down