View Source BitstylesPhoenix.Component.Error (bitstyles_phoenix v2.5.0)
Component for showing UI errors.
Summary
Functions
Generates tag for custom errors.
Attributes
error
(required) - The error to render (expected to be a tuple with{message :: String.t(), opts :: keyword()}
).- All other attributes are passed to the outer
span
tag.
Uses the translate_errors
MFA from the config to translate field errors (e.g. with gettext
).
The error will be rendered with the warning color, as specified in bitstyles colors.
An error tag
iex> assigns = %{}
...> render ~H"""
...> <.ui_error error={{"Foo error", []}} />
...> """
"""
<span class="u-fg-warning">
Foo error
</span>
"""
An error tag extra options and classes
iex> assigns = %{error: {"Foo error", []}}
...> render ~H"""
...> <.ui_error error={@error} phx-feedback-for="foo" class="bar" />
...> """
"""
<span class="u-fg-warning bar" phx-feedback-for="foo">
Foo error
</span>
"""
Render errors from a Phoenix.HTML.Form.
Attributes
form
(required) - The form to render the input form.field
(required) - The name of the field for the input.class
- Extra classes to pass to the wrappingul
if there are mutliple errors. SeeBitstylesPhoenix.Helper.classnames/1
for usage.error_class
- Extra classes to pass to the error component. SeeBitstylesPhoenix.Helper.classnames/1
for usage.
See also BitstylesPhoenix.Component.Form
.
Uses the translate_errors
MFA from the config to translate field errors (e.g. with gettext
).
A single error
iex> assigns = %{form: form_with_errors()}
...> render ~H"""
...> <.ui_errors form={@form} field={:name} />
...> """
"""
<span class="u-fg-warning" phx-feedback-for="user[name]">
is too short
</span>
"""
Multiple errors
iex> assigns = %{form: form_with_errors()}
...> render ~H"""
...> <.ui_errors form={@form} field={:email} />
...> """
"""
<ul class="u-padding-l3-left">
<li>
<span class="u-fg-warning" phx-feedback-for="user[email]">
is invalid
</span>
</li>
<li>
<span class="u-fg-warning" phx-feedback-for="user[email]">
must end with @bitcrowd.net
</span>
</li>
</ul>
"""