View Source BitstylesPhoenix.Component.Error (bitstyles_phoenix v2.4.0)

Component for showing UI errors.

Summary

Functions

Generates tag for custom errors.

Render errors from a Phoenix.HTML.Form.

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 wrapping ul if there are mutliple errors. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • error_class - Extra classes to pass to the error component. See BitstylesPhoenix.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-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>
"""