Missing functions error when adding a form to a newly created Phoenix app

Phoenix Forum Questions / Help
,
1

Hi,
Using the latest version of Phoenix.
I generated a new web app.
Opened up the home.html.heex file and added the following:

<.form :let={f} for={@changeset} action={""}>
<%= label f, :name %>
<%= text_input f, :name %>
<%= submit "Save" %>
</.form>

I execute the command “mix phx.server” and I get the following errors:

Compiling 15 files (.ex)
warning: undefined function submit/1 (expected App1Web.PageHTML to define such a function or for it to be imported, but none are available)
  lib/app1_web/controllers/page_html/home.html.heex:244

warning: undefined function text_input/2 (expected App1Web.PageHTML to define such a function or for it to be imported, but none are available)
  lib/app1_web/controllers/page_html/home.html.heex:242


== Compilation error in file lib/app1_web/controllers/page_html.ex ==
** (CompileError) lib/app1_web/controllers/page_html/home.html.heex:241: undefined function label/2 (expected App1Web.PageHTML to define such a function or for it to be imported, but none are available)

So, from the beginning, it looks like a newly generated project is not ready to handle forms which is disappointing. What must I include and where, to get these functions defined?

Thanks,
Patrick

1 Like
2

Welcome!

The latest version has made some big changes when it comes to writing HTML and for new applications created using the latest phx generators, Phoenix.View has been removed which is likely what caused those undefined function errors you’re seeing.

Check out these docs for <.form> aka Phoenix.Component.form/1
Also see docs on Form bindings — Phoenix LiveView v0.20.2

And here’s some relevant bits of the Phoenix 1.7 release announcement:

In practice, the generators give you templates that make use of your core components, which look like this:

<.simple_form for={@form} action={~p"/posts"}>
 <input field={@form[:title]} type="text" label="Title" />
 <input field={@form[:views]} type="number" label="Views" />

 <:actions>
   <.button>Save Post</.button>
 </:actions>
</.simple_form>

Unified function components across Controllers and LiveViews

Function components provided by HEEx, with declarative assigns and slots, are massive step-change in the way we write HTML in Phoenix projects. Function components provide UI building blocks, allowing features to be encapsulated and better extended over the previous template approach in Phoenix.View. You get a more natural way to write dynamic markup, reusable UI that can be extended by the caller, and compile-time features to make writing HTML-based applications a truly first-class experience.
…
New applications (and the phx generators), remove Phoenix.View as a dependency in favor of a new Phoenix.Template dependency, which uses function components as the basis for all rendering in the framework.

5 Likes
3

Thanks!