zingo

zingo

How do I create a select-element in a liveview-form?

Hi, I’m trying to learn Elixir and Phoenix LiveView, now I’m stuck on how to create a dropdown/select in the automatically generated form_component.ex. There is no <.select>, and I have tried using <select> but it’s not working very good.

This is my setup:

mix phx.new testing
cd testing
mix phx.gen.live Categories Category categories name:string
mix phx.gen.live Products Product products name:string category_id:references:categories

Then adding the suggested routes to the router.ex-file. I have also modified my schemas:

defmodule Testing.Categories.Category do
  use Ecto.Schema
  import Ecto.Changeset

  schema "categories" do
    field :name, :string
    has_many :products, Testing.Products.Product

    timestamps(type: :utc_datetime)
  end

  @doc false
  def changeset(category, attrs) do
    category
    |> cast(attrs, [:name])
    |> validate_required([:name])
  end
end

and

defmodule Testing.Products.Product do
  use Ecto.Schema
  import Ecto.Changeset

  schema "products" do
    field :name, :string
    belongs_to :category, Testing.Products.Product

    timestamps(type: :utc_datetime)
  end

  @doc false
  def changeset(product, attrs) do
    product
    |> cast(attrs, [:name, :category_id])
    |> validate_required([:name, :category_id])
  end
end

Finally I have run mix ecto.create and mix ecto.migrate.
The form_component.ex generated for my products has the following form:

      <.simple_form
        for={@form}
        id="product-form"
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
      >
        <.input field={@form[:name]} type="text" label="Name" />
        <:actions>
          <.button phx-disable-with="Saving...">Save Product</.button>
        </:actions>
      </.simple_form>

Not sure if I got everything right so far, but I can create a new “Category” with the generated code. When I go to localhost:4000/products and try to create a new product, the form only contains an input for the name. I want to be able to select a (previously created) category from a list, so that I can save my product with a correct category. As I mentioned, I have tried different methods but I can’t get it to work. When I google for sample code, the code that’s been generated for my liveviews doesn’t have much in common with the code samples I find online.

And how comes phx.gen.live doesn’t generate forms with elements for the relations? Even if you don’t always need to select relations from a drop down-list it would have made it easier to understand everything for a beginner, and also when building quick prototypes and admins.

Marked As Solved

LostKobrakai

LostKobrakai

<.input type="select" options={…} />

<.input> is a generic input rendering component and not some 1:1 mapping to just <input>

Also Liked

sodapopcan

sodapopcan

Yep, that’s how it’s done. Select options are a list of tuples in the form of {text, id}. I usually put it in assigns, though if it’s static it doesn’t much matter I don’t think:

category_options = Enum.map(Testing.Categories.list_categories(), &{&1.name, &1.id})

socket =
  socket
  |> assign(:category_options, category_options)

<.input field={@form[:category_id]} type="select" options={@category_options} />

Where Next?

Popular in Questions Top

jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

Other popular topics Top

Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New

We're in Beta

About us Mission Statement