使用不带跨度的 error_tag 或使用不同的 class

Question

我在 Phoenix 应用程序中使用 Tailwind CSS 2.0。表格中的error_tag让我很头疼：

<div>
  <label for="password" class="block text-sm font-medium text-gray-700">
    Passwort
  </label>
  <div class="mt-1">
    <%= password_input f, :password, required: true, id: "password", type: "password", 
        autocomplete: "new-password", 
        class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md 
                shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 
                focus:border-indigo-500 sm:text-sm" 
    %>
    <p class="mt-2 text-sm text-gray-500"><%= error_tag f, :password %></p>
  </div>
</div>

结果是 HTML:

<p class="mt-2 text-sm text-gray-500">
<span class="invalid-feedback" phx-feedback-for="user_password">
  should be at least 8 character(s)
</span>
</p>

和这个渲染：

问题： 我可以强制 error_tag 不渲染 <span>，使用不同的 class 或者我可以访问错误消息没有 error_tag?

我试图通过谷歌搜索 error_tag 和 class 来解决这个问题，但这并没有产生任何有用的文章。

Answer 1

这是error_tag/2

的实现

def error_tag(form, field) do
  Enum.map(Keyword.get_values(form.errors, field), fn error ->
    content_tag(:span, translate_error(error),
      class: "invalid-feedback",
      phx_feedback_for: input_name(form, field)
    )
  end)
end

也就是说，我看到许多不同的方法来处理这个问题：

直接使用Phoenix.HTML.Tag.content_tag/2；
为 invalid-feedback 覆盖 CSS class 以取消设置样式。

我会选择原始 content_tag/2。

Answer 2

你能试试换成这样的class吗？

<%= error_tag f, class: "New class", :password %>

Answer 3

将视图目录中的默认 error_helpers.ex 文件更新为：

def error_tag(form, field) do
Enum.map(Keyword.get_values(form.errors, field), fn error ->
  field = field |> Atom.to_string() |> String.capitalize()
  content_tag(:span, "#{field} #{translate_error(error)}", class: "block mt-1 text-sm text-red-700")
end) end

为我修复了它，我的错误消息显示正确

使用不带跨度的 error_tag 或使用不同的 class

Use error_tag without the span or with a different class

elixir

phoenix-framework