wktdev
June 23, 2023, 2:26pm
1
I used the Phoenix generator to create a table and the accompanying HTML forms.input and I want to change one of them to textarea .
The form template the generator gives me is this:
<.simple_form :let={f} for={@changeset} action={@action}>
<.error :if={@changeset.action}>
Oops, something went wrong! Please check the errors below.
</.error>
<.input field={f[:name]} type="text" label="Name" />
<.input field={f[:version]} type="text" label="Version" />
<.input field={f[:owner]} type="text" label="Owner" />
<.input field={f[:note]} type="text" label="Note" />
<.input field={f[:developer]} type="text" label="Developer" />
<.input field={f[:status]} type="text" label="Status" />
<.input field={f[:url]} type="text" label="Url" />
<:actions>
<.button>Save Test bed</.button>
</:actions>
</.simple_form>
If I try to change one of those inputs to textarea I get an error. Example:
<.textarea field={f[:note]} type="text" label="Note" />
How do I change them without error?
Hi @wktdev please always provide any errors that you get.
EDIT: Based on my read of the core components you should be doing:
<.input field={f[:note]} type="textarea" label="Note" />
3 Likes
7stud
December 31, 2023, 10:57pm
4
Can you direct me to where I can read about the core components? I can’t find anything about <.input>. For instance, how are people supposed to know what the various possible values for the type attribute are? “textarea” is not a legal type attribute for an html input element, but it works with the input function.
Also, is there something to create a datetime select, e.g.:
<%= datetime_select f, :ends_at %>
perhaps:
<.datetime >
??
Core components are defined in your application code so assuming you’re using the generators, take a look at the inline docs in your core_components.ex file.
@doc """
Renders an input with label and error messages.
A `Phoenix.HTML.FormField` may be passed as argument,
which is used to retrieve the input name, id, and values.
Otherwise all attributes may be passed explicitly.
## Types
This function accepts all HTML input types, considering that:
* You may also set `type="select"` to render a `<select>` tag
* `type="checkbox"` is used exclusively to render boolean values
* For live file uploads, see `Phoenix.Component.live_file_input/1`
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
for more information.
show original
Regarding support for "textarea", it’s added via a custom functionhead:
def input(%{type: "textarea"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<.label for={@id}><%%= @label %></.label>
<textarea
id={@id}
name={@name}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"min-h-[6rem] phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
@errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
{@rest}
><%%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
<.error :for={msg <- @errors}><%%= msg %></.error>
</div>
"""
end
From a while back, here’s an example of extending the .input core component to support radio buttons .
2 Likes
7stud
December 31, 2023, 11:36pm
6
Okay, I see “core components” mentioned everywhere, but there is nothing in the docs about them. In my Phoenix app, I just found the file:
auction_web/lib/auction_web/components/core_components.ex
That’s where things like <.simple_form> and <.input> come from.
The Phoenix.Component docs should allow me to figure out how the functions in core_components.ex work.
