Forms development (getting: undefined function label/2)

I get this long warning/error

undefined function label/2 (expected MyAppLiveWeb.BookFormLive to define such a function or for it to be imported, but none are available)Elixir
undefined function text_input/2 (expected MyAppLiveWeb.BookFormLive to define such a function or for it to be imported, but none are available)Elixir
variable “f” does not exist and is being expanded to “f()”, please use parentheses to remove the ambiguity or change the variable nameElixir
variable “f” does not exist and is being expanded to “f()”, please use parentheses to remove the ambiguity or change the variable nameElixir
(CompileError) undefined function f/0 (expected MyAppLiveWeb.BookFormLive to define such a function or for it to be imported, but none are available)

when trying to define a form like this:

  def render(assigns) do
    ~H"""
    <h1>Testing the book form</h1>

    <.form let={f} for={@form} id="book-form" phx-change="validate" phx-submit="save">
      <%= label(f, :title) %> <%= text_input(f, :title) %>
    </.form>
    """
  end

my question is:

  1. where are the fields defined in this case
  2. where can I find example of using forms in the latest version of elixir/phoenix.

It seems the forms declarations seem to change on almost every release.

anywho: thanks

I’m currentlly working with

  defp deps do
    [
      {:phoenix, "~> 1.7.2"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.6"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 3.3"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.18.18"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.7.2"},
      {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
      {:swoosh, "~> 1.3"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:plug_cowboy, "~> 2.5"}
    ]
  end

I see that you are using phoenix 1.7.2, which form input functions such as label/2 and text_input/2 are not available unless you import them explicitly from Phoenix.HTML.Form where you need them. In this case you have to use the input component defined in core_components.ex.

where can I find example of using forms in the latest version of elixir/phoenix.

You can look at the Phoenix.Component docs, on how to define and use components, for example those defined in core_components.ex

You also use phx.gen.live to generate a LiveView, from which you can use as an example or reference regarding forms.

1 Like

will do the .gen.live,
I’ve read as much of the Phoenix.Component and the form docs that I can get my hands on, but most of the info is confusing to me…

Thank You much…

1 Like

update:

the code below renders the image:

<.form
      :let={f}
      for={%{title: "LCR", description: "now is the hour", author_id: "luis-carlos"}}
      id="book-form"
      phx-change="validate"
      phx-submit="save"
    >
      <%= label(f, :title) %>
      <span class="text-4xl rounded"><%= text_input(f, :title) %></span> <%= label(f, :description) %> <%= textarea(
        f,
        :description
      ) %> <%= label(f, :author) %> <%= text_input(f, :author_id) %>
    </.form>

now question is: how do I apply the CSS to this code…

Thanks again

You just add the classes to .form and label, the same as you normally do.
<.form ... class="flex flex-col">
<%= label(f, :title, class: "mt-2" %>

thanks will try and update, great support from this forum, love it…

UPDATE:
for this code:
<%= label(f, :author, class = "text-xl bg-gray-400 ") %> <%= text_input(f, :author_id) %>

i get this result:
style-not-working
and I know these Tailwindcss commands work when I put them on a div tag

and by the way where is the styling for the new form component/sub components documented?

I can’t find anything about these new modules, love them but having a problem trying to use them and read the docs

thanks for your help…

UPDATE:

My bad, I had a type on the class attribute, instead of a “:” I put a “=” and once I changed it, it worked to perfection, greate.

the only thing left is where are the docs for these new component commands…

for this form code

defmodule MyAppLiveWeb.BookFormLive do
  use MyAppLiveWeb, :live_view

  import Phoenix.HTML.Form

  def render(assigns) do
    ~H"""
    <h1>Testing the book form</h1>

    <.form
      :let={f}
      for={%{title: "new form learning tool", description: "now is the hour", author_id: "somebody", stores: [""]}}
      id="book-form"
      phx-change="validate"
      phx-submit="save"
    >
      <%= label(f, :title, class: "text-xl, text-[blue]") %> 
      <%= text_input(f, :title, class: "bg-[gray=200] rounded-xl text-bottom") %>
      
      <%= label(f, :description, class: "text-xl, text-gray-500") %> 
      <%= textarea( f, :description ) %>

       <%= label(f, :author, class: "text-xl bg-gray-400 ") %> 
       <%= text_input(f, :author_id) %> 
       <%= select(f, :stores, Enum.map(["lc", "mc", "tc", "tat"], & &1)) %>
    </.form>
    """
  end
end

with this result:

I need help in finding the styling docs so I can create decent forms NOT LOOKING THIS UGLY

where are the docs, I’ve been looking but not finding anything useful

Thanks for all your help…

If you use the components included in your core_components.ex, they already have nice styling designed by the tailwindcss team. So instead of <%= label( you’d use <.label, <.input, etc. These are what you’ll see if you use phx.gen.live ... or phx.gen.auth ... generators like jmnda suggested.

If you’re not happy with those styles, you’re free to modify the core_components and style them however you want. Installation - Tailwind CSS is a great resource for seeing how to use Tailwind. If styling’s not really your thing, there are a lot of paid and free resources that provide styles. (eg Tailwind UI, Flowbyte, etc.)

1 Like

Yes, I’ve been digging into Tailwindcss and like it, but I’m looking for the docs for the new components an now you just threw new ones like .label, .input and the like, where can I find the docs for those as well.

I’m going to dig into the core_componets.ex for more info…

great tip for the day, and thanks again.

.label, .input, etc. are just some helper components that Phoenix generates to make it easier to work with forms. They display errors, convert Ecto data types into form data, and add a lot of nice styles on top of regular HTML elements. They’re in core_components and have docs there as well. It’s encouraged to modify and add to core_components for your own needs. I’ve changed styles, added an autocomplete select, added support for other data types, etc.