Skip to content
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

Jump to bottom

FormItem: Updated el-form-item to accept custom error message via scoped-slot #12715

Merged
merged 7 commits into from
Sep 13, 2018
Merged

FormItem: Updated el-form-item to accept custom error message via scoped-slot #12715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dc9e193
Updated el-form-item to accept custom error message via slot
YamenSharaf Sep 11, 2018
f1d85b7
FormItem: updated slot name in docs
YamenSharaf Sep 11, 2018
ac879d2
updated spanish and chinese translations
YamenSharaf Sep 12, 2018
320f844
Update form.md
ziyoung Sep 13, 2018
a45f86c
Update form.md
ziyoung Sep 13, 2018
3efad87
Update form.md
ziyoung Sep 13, 2018
9b187ad
Update form.md
ziyoung Sep 13, 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
7 changes: 6 additions & 1 deletion examples/docs/en-US/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -879,9 +879,14 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
| — | content of Form Item |
| label | content of label |

### Form-Item Scoped Slot
| Name | Description |
|---------------|-------------|
| error | Custom content to display validation message. The scope parameter is { error } |

### Form-Item Methods

| Method | Description | Parameters |
| ---- | ---- | ---- |
| resetField | reset current field and remove validation result | — |
| clearValidate | remove validation status of the field | -
| clearValidate | remove validation status of the field | - |
5 changes: 5 additions & 0 deletions examples/docs/es/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,6 +884,11 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| — | contenido del Form Item |
| label | contenido de la etiqueta |

### Form-Item Scoped Slot
| Name | Description |
|---------------|-------------|
| error | Custom content to display validation message. The scope parameter is { error } |

### Form-Item Metodo

| Metodo | Descripción | Parametros |
Expand Down
5 changes: 5 additions & 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 @@ -867,6 +867,11 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
| — | Form Item 的内容 |
| label | 标签文本的内容 |

### Form-Item Scoped Slot
| name | 说明 |
|--------|--------|
| error | 自定义表单校验信息的显示方式，参数为 { error } |

### Form-Item Methods

| 方法名 | 说明 | 参数
Expand Down
26 changes: 15 additions & 11 deletions packages/form/src/form-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,21 @@
<div class="el-form-item__content" :style="contentStyle">
<slot></slot>
<transition name="el-zoom-in-top">
<div
v-if="validateState === 'error' && showMessage && form.showMessage"
class="el-form-item__error"
:class="{
'el-form-item__error--inline': typeof inlineMessage === 'boolean'
? inlineMessage
: (elForm && elForm.inlineMessage || false)
}"
>
{{validateMessage}}
</div>
<slot
v-if="validateState === 'error' && showMessage && form.showMessage"
name="error"
:error="validateMessage">
<div
class="el-form-item__error"
:class="{
'el-form-item__error--inline': typeof inlineMessage === 'boolean'
? inlineMessage
: (elForm && elForm.inlineMessage || false)
}"
>
{{validateMessage}}
</div>
</slot>
</transition>
</div>
</div>
Expand Down