Live View Streams with Index returns error

Can you expand on why you need to use the index?

The entire point of streams is to not keep the entire data set in memory, and you’d need that to have an index. If you can expand on what you’re doing with the index, perhaps someone here can suggest an alternative solution.

Thanks @zachallaun for the fast reply.
Sure I can expand. So, for example, right below the for loop with streams I’ll have something like:

<div id={"some-id-name-#{index}"} class="form-row form-row-indent-sm">

And so on, for example another use I’ll have to make with index is to show options on a select given the index
Like this:

<div class="flex-1">
  <%= select f, :type,
    get_options(index),
    disabled: @disabled
  %>
</div>

Is this enough? I know that usually people use IDs from changesets but in my case I wont have a changeset, at least not when the form renders for the first time, I’ll have to show empty inputs in this case.
Please tell me if you need more info.
Thanks so far!

Have you tried the suggestion in the error message?
How do you currently assign the stream and could you “decorate” the items with an index before streaming them?

Have you tried the suggestion in the error message?

I did after you mention but it was logic not to work since theres no :stream inside the assigns.

How do you currently assign the stream and could you “decorate” the items with an index before streaming them?

This is how I’m assigning:

def update(assigns, socket) do
    socket =
      socket
      |> assign(assigns)
      |> stream(:changeset, [to_form(User.changeset(%User{}, %{}))])
    {:ok, socket}
  end

As you can see I’m assigning an empty changeset to the stream in the update funciton for the first render, I’ll update the changeset in some event later on.
Actually I’d rather even just send an empty list to the stream, but then I wouldnt have a Phoenix.HTML.Form.

Hmm, is it really worth streaming a single form struct?

Streams were designed with collections in mind and the design pattern from form components created via the generators store the form struct as an assign which also makes it easy to update in the form validation callback like so:

  defp assign_form(socket, %Ecto.Changeset{} = changeset) do
    assign(socket, :form, to_form(changeset))
  end

  def update(%{list: list} = assigns, socket) do
    changeset = Todos.change_list(list)

    {:ok,
     socket
     |> assign(assigns)
     |> assign_form(changeset)}
  end

  def handle_event("validate", %{"list" => list_params}, socket) do
    changeset =
      socket.assigns.list
      |> Todos.change_list(list_params)
      |> Map.put(:action, :validate)

    {:noreply, assign_form(socket, changeset)}
  end

I understand, but see this case. I have a simple form with 2 inputs, a select and a text, this is a component, and below this form will be a button to add form that when clicked the same form will duplicate one above the other. So we can have multiple forms in there with no changesets, they can all be empty but I’ll have to use stream since these forms will be a list of forms. So this is why I need to use stream in here.

I still think this is is sort of questionable. Are there going to be > 1000 forms? I can’t imagine how that would be good UX. If you have N forms I’d still just have N form components and probably make each of them a live component so that they can each manage their own events.

That’s plausible.
But then would you have just a simple for loop through the list of forms without using the stream?

Yeah or depending on how your page is set up iterate through a list of users and then pass that user to a live component, and have each component generate their own form.

With the latest version of LiveView, you can use the new sort/drop_param and options for cast_assoc/embed in conjunction with inputs_for for Dynamically adding and removing inputs like so:

<label class="block cursor-pointer">
  <input type="checkbox" name="list[emails_sort][]" class="hidden" />
  add more
</label>

<input type="hidden" name="list[emails_drop][]" />