Select field with all country codes

I’m try to create a form with a select field with the list of all countries

<%= select :user, :country_code, Enum.map(Countries.all, fn c -> {c.name, c.alpha2} end), class: "form-control" %>

But it print this bad html:

<select class="form-control" id="user_country_code" name="user[country_code]"><optgroup label="Zimbabwe"><option value="90">90</option><option value="87">87</option></optgroup><optgroup label="Zambia"><option value="90">90</option><option value="77">77</option></optgroup><optgroup label="South Africa"><option value="90">90</option><option value="65">65</option></optgroup><optgroup label="Mayotte"><option value="89">89</option><option value="84">84</option></optgroup><optgroup label="Yemen"><option value="89">89</option><option value="69">69</option></optgroup><optgroup label="Samoa"><option value="87">87</option><option value="83">83</option></optgroup><optgroup label="Wallis and Futuna"><option value="87">87</option><option value="70">70</option></optgroup><optgroup label="Vanuatu"><option value="86">86</option><option value="85">85</o...

Why?
How can i do to have name like label and alpha2 (‘IT’, ‘EN’) like value of select field?
Thanks

You need to use maps, I think.

select(form, :country, %{"Europe" => ["UK", "Sweden", "France"], …})

produces

<select id="user_country" name="user[country]">
  <optgroup label="Europe">
    <option>UK</option>
    <option>Sweden</option>
    <option>France</option>
  </optgroup>
  ...
</select>

So it would be something like

<%= select :user, :country_code, get_country_codes(), class: "form-control" %>

where get_country_codes/0 is defined in you view like

def get_country_codes do
  Countries.all()
  |> Enum.group_by(fn c -> c.name end, fn c -> c.alpha2 end)
end

Also, does Countries.all() hit a database? You might want not to do it, since this data is unlikely to change.

Maybe you can create a function in a view as a helper, something like:

  def country_options do
    Country
    |> Repo.all
    |> Enum.map(&{&1.name, &1.alpha2})
  end

and then use this function on the select tag in order to create the select options, like:

<%= select :user, :country_code, country_options(), class: "form-control", prompt: gettext("Select a country") %>

You can create a country Select control with all countries with the countries library as follows:

def get_country_codes do
      Enum.group_by(Countries.all, &(List.to_string(&1.region)), fn(x) -> {List.to_string(x.name), List.to_string(x.alpha2)} end )
      |> Enum.into( %{}, fn {key, list} -> {key, Enum.sort(list)} end)
end

Note that Countries.all returns single-quoted char lists, which causes errors from the Select control, which expects atoms, strings or integers, hence the cast to string. Using Enum.into sorts by the keys in the list.

There’s a lot to unpack with this if you’re new to Elixir. Hope it helps!

Here is the simple version.

def get_country_codes do
  Enum.into(Countries.all, %{}, fn x -> {x.name, x.alpha2} end) |> Enum.sort
end

Good luck!

One of the lesser known corners of the ex_cldr universe is ex_cldr_html. Its not as mature as the other libraries but I make progress on it when time permits. Today I added Cldr.HTML.Territory which is a module that implements an HTML select helper for use in Phoenix.

By default is returns a list of all known territories, using localised names. The default format is a Unicode flag followed by the standard name.

Background on why “territories” and not “countries”

A country is a political entity, a territory is a geographic one. For international localised applications, what constitutes a country can be a sensitive topic. Hence CLDR uses “region” or “territory”. ex_cldr uses “territory”.

Where CLDR data differs from ISO3166

Although very closely related, CLDR uses a combination of ISO3166 Alpha-2 codes and UN.M49 for geographic areas that enclose several territories.

Differences between ISO3166 name and CLDR names

As noted in TR35, CLDR takes a more pragmatic approach to territory names. Territory names may not match the official name of the territory, and the English or French names may not match those in ISO 3166. Reasons for this include:

  • CLDR favors customary names in common parlance, not necessarily the official names.
  • CLDR endeavors to provide names that are not too long, in order to avoid problems with truncation or overflow in user interfaces.

Example in the “th” locale

iex> Cldr.HTML.Territory.select(:my_form,  :territory, territories: [:US, :AU], 
       selected: :IT, locale: "th") |> safe_to_string()

<select id="my_form_territory" name="my_form[territory]">
  <option value="AU">🇦🇺 ออสเตรเลีย</option>
  <option value="IT" selected>🇮🇹 อิตาลี</option>
  <option value="US">🇺🇸 สหรัฐอเมริกา</option>
</select>

Documentation

Generate an HTML select tag for a territory list
that can be used with a `Phoenix.HTML.Form.t`.

Arguments

* A `Phoenix.HTML.Form.t()` form

* A `Phoenix.HTML.Form.field()` field

* A `Keyword.t()` list of options

Options

For select options see Phoenix.HTML.Form.select/4

* `:territories` defines the list of territories to be
  displayed in the the `select` tag.  The list defaults to
  the territories returned by `Cldr.known_territories/0`.

* `:style` is the format of the territory name to be used.
  The options are `:standard` (the default), `:short` and `:variant`.
  Not all territories have `:short` or `:variant` names in which
  case `:standard` is used for those territories.

* `:locale` defines the locale to be used to localise the
  description of the territories.  The default is the locale
  returned by `Cldr.get_locale/1`

* `:backend` is any backend module. The default is
  `Cldr.default_backend!/0`

* `:mapper` is a function that creates the text to be
  displayed in the select tag for each territory.  It is
  passed the territory definition as a map containing the keys
  `:territory_code`, `:name` and `:flag`.  The default function
  is `&({&1.flag <> " " <> &1.name, &1.territory_code})`

* `:selected` identifies the territory that is to be selected
  by default in the `select` tag.  The default is `nil`. This
  is passed unmodified to `Phoenix.HTML.Form.select/4`

* `:prompt` is a prompt displayed at the top of the select
   box. This is passed unmodified to `Phoenix.HTML.Form.select/4`

Limitations

Currently the use of maps to define optgroups is not supported.

5 Likes