Simple LiveView usecase: adding array elements

Questions / Help
1

Hey!

So I’m looking forward to implement a simple use case, but trying to work my ways around liveview.
The use case is a Ecto model which has an array of strings.

Ecto

  schema "lesson" do
    field :about, :string
    field :learnings, {:array, :string}
    field :name, :string

    timestamps()
  end

My intention is to have add/remove buttons in the liveview and these should append new empty text inputs to the form.

Form Component

  <.form
    let={f}
    for={@changeset}
    id="course-form"
    phx-target={@myself}
    phx-submit="save">
  
    <%= label f, :name %>
    <%= text_input f, :name %>
    <%= error_tag f, :name %>
  
    <%= label f, :about %>
    <%= textarea f, :about %>
    <%= error_tag f, :about %>
  

    <div>
      <%= submit "Save", phx_disable_with: "Saving..." %>
    </div>
  </.form>

I would imagine that it should be something like adding a:

  <a href="#" phx-click="add-learning">Add Learning</a>

but this im unsure how to produce add the new input and also this is firing a phx-change on the form even if the href is outside of it.

Appreciating any possible guidance/help!

2

If you’re happy to do a trip to the server to do so, then @LostKobrakai has an example here.

1 Like
3

Thanks for the reply @cmo .
No, i’m not happy to do a trip to the server, but I imagined the gist was also to try and avoid javascript.

4

In that case, you’re going to have to do something like create the entire form in js, create the extra <input> elements with a Hook or have an extra one always there but hidden with css and show it + add another hidden one when the button is clicked.

And if it’s a button you’re creating, shouldn’t you use <button> instead of <a>?