View Source Spike.LiveView.Components (spike_liveview v0.3.1)

Provides low-level components that can be useful to built higher-level form input components in your app.

For starting point to build your own form components, see our Components Library.

Link to this section Summary

Functions

Allows you to get a map of errors on dirty fields of given form.

Renders form, which wraps input fields, allowing for Spike.LiveView events to be emitted on change, and captured by LiveView or LiveComponent specified by target attribute.

Link to this section Functions

Allows you to get a map of errors on dirty fields of given form.

Attributes:

  • form - required, should map to Spike.Form, usually @form in assigns

  • field - required, atom, should be one of the existing fields on the form

  • dirty_fields -> optional, defautls to Spike.dirty_fields(form)

    import Spike.LiveView.Components
    ...
    
    <.errors let={field_errors} field={@field} form={@form} errors={@errors}>
      <span class="error">
        <%= field_errors |> Enum.map(fn {_k, v} -> v end) |> Enum.join(", ") %>
      </span>
    </.errors>

Renders form, which wraps input fields, allowing for Spike.LiveView events to be emitted on change, and captured by LiveView or LiveComponent specified by target attribute.

This component accepts a slot, in which your input field should reside along with any additional markup you may require, and the following attributes:

  • form - required, should map to Spike.Form, usually @form in assigns

  • field - required, atom, should be one of the existing fields on the form

  • submit_event - optional, name of an event that will be emitted when, for example, user hits Enter on the input

  • target - optional, leave nil if your @form is handled by LiveView, set to @myself (or component selector) if the form changes should be handled by a component.

    import Spike.LiveView.Components
    ...
    <.form_field form={@form} field={:first_name}>
      <input type="text" name="value" value={@form_field.first_name} />
    </.form_field>