Surface.Components.Form.ErrorTag (surface v0.1.0) View Source
A component inspired by error_tag/3
that ships with mix phx.new
in
MyAppWeb.ErrorHelpers
.
Renders error messages if any exist regarding the given field.
Error Translation
Changeset errors are translated using the default error translator
that ships with phoenix when generated with mix phx.new --no-gettext
.
When using Gettext, you can use configuration to route all errors through
the MyAppWeb.ErrorHelpers.translate_error/1
function generated by Phoenix,
which utilizes Gettext
. You need to provide a tuple with the module and
the name of the function (as an atom) as follows:
config :surface, :components, [
{Surface.Components.Form.ErrorTag, translator: {MyAppWeb.ErrorHelpers, :translate_error}}
]
There is also a translator
prop which can be used on a case-by-case basis.
It overrides the configuration.
Examples
<ErrorTag field="password" />
<Field name="password>
<ErrorTag />
</Field>
<ErrorTag phx_feedback_for="confirm_password_for_reset" />
<ErrorTag class="custom-css-classes" />
<ErrorTag translator={{ &CustomTranslationLib.translate_error/1 }} />
Properties
- form :form - An identifier for the form.
- field :atom - An identifier for the associated field.
- class :css_class - Classes to apply to each error tag <span>.
This can also be set via config, for example:
config :surface, :components, [
{Surface.Components.Form.ErrorTag, default_class: "invalid-feedback"}
]
However, the prop overrides the config value if provided. .
- translator :fun - A function that takes one argument
{msg, opts}
and returns the translated error message as a string. If not provided, falls back to Phoenix's default implementation.
This can also be set via config, for example:
config :surface, :components, [
{Surface.Components.Form.ErrorTag, translator: {MyApp.Gettext, :translate_error}}
]
.
- phx_feedback_for :string - If you changed the default ID on the input, provide it here. (Useful when there are multiple forms on the same page, each with an input of the same name. LiveView will exhibit buggy behavior without assigning separate id's to each.) .
Link to this section Summary
Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Translates an error message.
Link to this section Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Translates an error message.
This is the fallback (Phoenix's default implementation) if a translator
is not provided via config or the translate
prop.