fabcm1

fabcm1

New Components module from Phoenix 1.7 (input select use case)

Hi,

I am trying to use the components module that is being developed in Phoenix 1.7 in order to try the new resources from Liveview 0.18 with tailwind.

I can’t figure out what is the syntax of input/1 with type: “select” in the :option slot. It seems very different from the select/4 of Phoenix.HTML.Form. Here is an example that I am trying to make work:

In the heex, inside form, the following renders a select menu:

<%= select(f, :city_id, Enum.map(@cities, fn city -> {city.name, city.id} end)) %> 

Now, I try

<.input field={{f, :city_id}} type="select" option={Enum.map(@cities, fn city -> {city.name, city.id} end)} label="choose your city" />

and it fails with

** (Protocol.UndefinedError) protocol Enumerable not implemented for {"CITY NAME", 1} of type Tuple
        (elixir 1.14.0) lib/enum.ex:1: Enumerable.impl_for!/1
        (elixir 1.14.0) lib/enum.ex:166: Enumerable.reduce/3
        (elixir 1.14.0) lib/enum.ex:4307: Enum.reduce/3
        (phoenix_live_view 0.18.2) lib/phoenix_component.ex:762: Phoenix.Component.assigns_to_attributes/2
        ...

thanks in advance,

Marked As Solved

DecoyLexi

DecoyLexi

Update: this syntax is no longer correct. For new projects generated with Phoenix 1.7.0-rc.0, the <.input type="select"/> component uses Phoenix.HTML.Form.options_for_select under the hood. Since commit 2fdb410, you’d use your original snippet with option changed to options:

<.input 
  field={{f, :city_id}}
  type="select" 
  label="Choose your city" 
  options={Enum.map(@cities, fn city -> {city.name, city.id} end)} 
/>

Also Liked

DecoyLexi

DecoyLexi

You can use the slot syntax for select inputs:

<.input field={{f, :city_id}} type="select" label="Choose your city">
  <:option :for={city <- @cities} value={city.id}><%= city.name %></:option>
</.input>

Where Next?

Popular in Questions Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
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

Other popular topics Top

RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
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
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
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
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
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
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New

We're in Beta

About us Mission Statement