View Source BitstylesPhoenix.Component.Error (bitstyles_phoenix v2.4.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
spantag.
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 wrappingulif there are mutliple errors. SeeBitstylesPhoenix.Helper.classnames/1for usage.error_class- Extra classes to pass to the error component. SeeBitstylesPhoenix.Helper.classnames/1for 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-xl-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>
"""