Select element in a nested form

wolfiton · December 21, 2019, 1:02pm

Hi everyone,

I am getting an error when i try to add a select in a nested form

The error no function clause matching in Keyword.pop/3

My select code:

<div class="field">
  <%= label f, :category, class: "label" %>
  <div class="control">

    <%= select f, :category_id, @categories, fn cf -> %>
    IO.inspect(@categories)
  </div>
  <p class="help is-danger"><%= error_tag cf, :category %></p>
  <% end %>
</div>

Update link to form as suggested by @benwilson512

github.com

wolfiton/blog_api/blob/master/lib/blog_api_web/templates/article/form.html.eex

<%= form_for @changeset, @action, fn f -> %>

<%= if @changeset.action do %>
<div class="alert alert-danger">
  <p>Oops, something went wrong! Please check the errors below.</p>
</div>
<% end %>

<div class="field">
  <%= label f, :title, class: "label" %>
  <div class="control">
    <%= text_input f, :title, class: "input", placeholder: "Title" %>
  </div>
  <p class="help is-danger"><%= error_tag f, :title %></p>
</div>

<div class="field">
  <%= label f, :content, class: "label" %>
  <div class="control">
    <%= textarea f, :content, class: "textarea", placeholder: "Content" %>

This file has been truncated. show original

Update error trace

[info] GET /articles/new
[]
[debug] Processing with BlogApiWeb.ArticleController.new/2
  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="categories" db=2.3ms
SELECT c0."id", c0."name", c0."slug", c0."inserted_at", c0."updated_at" FROM "categories" AS c0 []
[info] Sent 500 in 166ms
[error] #PID<0.840.0> running BlogApiWeb.Endpoint (connection #PID<0.839.0>, stream id 1) terminated
Server: localhost:4000 (http)
Request: GET /articles/new
** (exit) an exception was raised:
    ** (FunctionClauseError) no function clause matching in Keyword.pop/3
        (elixir) lib/keyword.ex:977: Keyword.pop(#Function<2.44023343/1 in BlogApiWeb.ArticleView."form.html"/1>, :value, nil)
        (phoenix_html) lib/phoenix_html/form.ex:1117: Phoenix.HTML.Form.selected/3
        (phoenix_html) lib/phoenix_html/form.ex:1099: Phoenix.HTML.Form.select/4
        (blog_api) lib/blog_api_web/templates/article/form.html.eex:29: anonymous fn/2 in BlogApiWeb.ArticleView."form.html"/1
        (phoenix_html) lib/phoenix_html/form.ex:377: Phoenix.HTML.Form.form_for/4
        (blog_api) lib/blog_api_web/templates/article/form.html.eex:1: BlogApiWeb.ArticleView."form.html"/1
        (blog_api) lib/blog_api_web/templates/article/new.html.eex:3: BlogApiWeb.ArticleView."new.html"/1
        (blog_api) lib/blog_api_web/templates/layout/app.html.eex:15: BlogApiWeb.LayoutView."app.html"/1
        (phoenix) lib/phoenix/view.ex:410: Phoenix.View.render_to_iodata/3
        (phoenix) lib/phoenix/controller.ex:729: Phoenix.Controller.__put_render__/5
        (phoenix) lib/phoenix/controller.ex:746: Phoenix.Controller.instrument_render_and_send/4
        (blog_api) lib/blog_api_web/controllers/article_controller.ex:1: BlogApiWeb.ArticleController.action/2
        (blog_api) lib/blog_api_web/controllers/article_controller.ex:1: BlogApiWeb.ArticleController.phoenix_controller_pipeline/2
        (phoenix) lib/phoenix/router.ex:288: Phoenix.Router.__call__/2
        (blog_api) lib/blog_api_web/endpoint.ex:1: BlogApiWeb.Endpoint.plug_builder_call/2
        (blog_api) lib/plug/debugger.ex:122: BlogApiWeb.Endpoint."call (overridable 3)"/2
        (blog_api) lib/blog_api_web/endpoint.ex:1: BlogApiWeb.Endpoint.call/2
        (phoenix) lib/phoenix/endpoint/cowboy2_handler.ex:42: Phoenix.Endpoint.Cowboy2Handler.init/4
        (cowboy) /home/dan/Codes/blog_api/deps/cowboy/src/cowboy_handler.erl:41: :cowboy_handler.execute/2
        (cowboy) /home/dan/Codes/blog_api/deps/cowboy/src/cowboy_stream_h.erl:320: :cowboy_stream_h.execute/3

Update article controller

github.com

wolfiton/blog_api/blob/master/lib/blog_api_web/controllers/article_controller.ex

defmodule BlogApiWeb.ArticleController do
  use BlogApiWeb, :controller

  alias BlogApi.Blog
  alias BlogApi.Blog.Article
  alias BlogApi.Categories

  def index(conn, _params) do
    articles = Blog.list_articles()
    render(conn, "index.html", articles: articles)
  end

  def new(conn, _params) do
    changeset = Blog.change_article(%Article{})
    categories = Categories.list_categories()
    IO.inspect(categories)
    render(conn, "new.html", changeset: changeset, categories: categories)
  end

  def create(conn, %{"article" => article_params}) do

This file has been truncated. show original

Update migrations for articles and categories

github.com

wolfiton/blog_api/blob/master/priv/repo/migrations/20191203154052_create_articles.exs

defmodule BlogApi.Repo.Migrations.CreateArticles do
  use Ecto.Migration

  def change do
    create table(:articles) do
      add :title, :string
      add :content, :string
      add :published, :boolean, default: false, null: false
      add :category_id, references(:categories, on_delete: :delete_all)
      timestamps()
    end
  end
end

github.com

wolfiton/blog_api/blob/master/priv/repo/migrations/20191213160415_create_categories.exs

defmodule BlogApi.Repo.Migrations.CreateCategories do
  use Ecto.Migration

  def change do
    create table(:categories) do
      add :name, :string
      add :slug, :string

      timestamps()
    end

    create unique_index(:categories, [:name])
  end
end

Schemas and contexts

github.com

wolfiton/blog_api/blob/master/lib/blog_api/blog/article.ex

defmodule BlogApi.Blog.Article do
  use Ecto.Schema
  import Ecto.Changeset
  alias BlogApi.Categories.Category

  schema "articles" do
    field :content, :string
    field :published, :boolean, default: false
    field :title, :string
    belongs_to(:category, Category)
    timestamps()
  end

  @doc false
  def changeset(article, attrs) do
    article
    |> cast(attrs, [:title, :content, :published])
    |> validate_required([:title, :content, :published])
    |> unique_constraint(:title)
  end

This file has been truncated. show original

github.com

wolfiton/blog_api/blob/master/lib/blog_api/categories/category.ex

defmodule BlogApi.Categories.Category do
  use Ecto.Schema
  import Ecto.Changeset
  alias BlogApi.Blog.Article

  schema "categories" do
    field :name, :string
    field :slug, :string

    has_many(:articles, Article)
    timestamps()
  end

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

This file has been truncated. show original

github.com

wolfiton/blog_api/blob/master/lib/blog_api/blog.ex

defmodule BlogApi.Blog do
  @moduledoc """
  The Blog context.
  """

  import Ecto.Query, warn: false
  alias BlogApi.Repo

  alias BlogApi.Blog.Article
  alias BlogApi.Categories.Category

  @doc """
  Returns the list of articles.

  ## Examples

      iex> list_articles()
      [%Article{}, ...]

  """

This file has been truncated. show original

github.com

wolfiton/blog_api/blob/master/lib/blog_api/categories.ex

defmodule BlogApi.Categories do
  @moduledoc """
  The Categories context.
  """

  import Ecto.Query, warn: false
  alias BlogApi.Repo

  alias BlogApi.Categories.Category

  @doc """
  Returns the list of categories.

  ## Examples

      iex> list_categories()
      [%Category{}, ...]

  """
  def list_categories do

This file has been truncated. show original

Also if there are any suggestions for the rest of my code the full code here https://github.com/wolfiton/blog_api
Thanks in advance

benwilson512 · December 21, 2019, 1:15pm

Please provide the full stack trace of the error, and it would probably help to link to the form within that code base.

wolfiton · December 21, 2019, 1:25pm

Thanks @benwilson512 for the suggestion I added more info.

benwilson512 · December 21, 2019, 1:56pm

https://github.com/wolfiton/blog_api/blob/master/lib/blog_api_web/templates/article/form.html.eex#L29 is the issue, it isn’t valid to pass a function to select.

wolfiton · December 21, 2019, 1:58pm

OK so I use the nested without passing a fn then?

benwilson512 · December 21, 2019, 1:59pm

I’m not really sure I understand why you need a nested form at all. :category_id is a field of the changeset. Nested forms are necessary when you are editing a value AND an associated (or embedded) value. Your form only messes with the top level changeset.

Either way, select does not create a nested form, you want inputs_for for that.

wolfiton · December 21, 2019, 2:01pm

Thanks I will check it out

Also to answer to you questions

I thought that this is the best way to achive what i wanted. But if it is not then please recommend a better way I have created this project to learn and understand phoenix so i am very open to any suggestions you might have.

Thanks again for helping me with this.

benwilson512 · December 21, 2019, 2:05pm

If what you want is to edit the category_id field, just treat it like the :title field.

<%= select f, :category_id, @categories %>
<p class="help is-danger"><%= error_tag f, :category %></p>