0

そこで、動的フォームを作成するためのこのチュートリアルに従いました: http://blog.plataformatec.com.br/2016/09/dynamic-forms-with-phoenix/

さて、これは私の実際のものinput_helpers.exです:

defmodule Conts.InputHelpers do
  @moduledoc """
  Define <%= input f, :pass, type: :password_input %> syntax
  to create dynamic form inputs
  """

  use Phoenix.HTML

  alias Phoenix.HTML.Form, as: PhxForm
  import ContsWeb.ErrorHelpers, only: [error_tag: 2]

  @label_opts "basic-form-label"
  @input_opts "basic-form-input"

  def input(form, field, opts \\ []) do
    label_text = opts[:label] || humanize(field)
    type = opts[:type] || PhxForm.input_type(form, field)
    additional_classes = opts[:class] || ""

    label_opts = [class: @label_opts]

    input_opts = [
      class: "#{@input_opts} #{state_class(form, field)} #{additional_classes}",
      id: opts[:id]
    ]

    label_opts = if opts[:id], do: [for: opts[:for]] ++ label_opts, else: label_opts

    content_tag :fieldset do
      label = label(form, field, label_text, label_opts)
      input = input(type, form, field, input_opts)
      error = error_tag(form, field)
      error = if Enum.empty?(error), do: "", else: error

      [label, input, error]
    end
  end

  defp state_class(form, field) do
    cond do
      # The form was not yet submitted
      !form.action -> ""
      form.errors[field] -> "border-red-500"
      # we don't need any additional style at all
      # only with focus:within
      true -> ""
    end
  end

  # Implement clauses below for custom inputs.
  # defp input(:datepicker, form, field, input_opts) do
  #   raise "not yet implemented"
  # end
  defp input(:password_confirmation, form, field, input_opts) do
    apply(PhxForm, :password, [form, field, input_opts])
  end

  defp input(type, form, field, input_opts) do
    apply(PhxForm, type, [form, field, input_opts])
  end
end

このプロジェクトには、1対 1 の関係をcliente持つuserスキーマがあります。

ライブ ビュー テンプレートでは、次のようにしました。


<%= input f, :nome, label: "Nome completo", phx_debounce: "blur" %>

<%= input f, :telefone, label: "Número de telefone", phx_debounce: "blur", class: "mobile-masked" %>

<%= inputs_for f, :user, fn u -> %>
  <%= input u, :email, phx_debounce: "blur" %>

  <%= input u, :password, label: "Senha", phx_debounce: "blur" %>

  <%= input u, :password_confirmation, label: "Confirme a Senha", phx_debounce: "blur" %>
<% end %>

最初の 2 つのフィールドは変更セットからのものでcliente、その他は変更セットからのものuserです。検証が開始されると、ユーザーは入力を入力し始めます。のフィールドはクラスをcliente正しく適用しますが、 のフィールドは適用しません!border-red-500user

私はそれをデバッグし、ユーザー変更セットの任意のフィールドを検証しようとすると、 のstate_class関数で、句input_helpers.exに該当することがわかりました。!form.acton

私の質問は、このネストされたフォーム アクションをどのように処理できますか? なぜそれが前述のcond条項に該当するのですか?

問題を示す GIF を次に示します。 ここに画像の説明を入力

4

1 に答える 1