Phoenix Frameworkでダブルネストフォームを作成するにはどうすればよいですか？

Question

私の問題は、セクションの下に入れ子になっているインタビューフォームにサブセクションを追加しようとすると、引数エラーが発生することです。

Interview_kitには多くのセクションがあり、セクションには多くのsub_sectionsがあります。セクションはinterview_kitに属し、サブセクションはセクションに属します。

これをすべて同じフォームで作成したいと思いますが、運がないとします。

フェニックスでこれを行うことは可能ですか？

# Error 
ArgumentError at GET /interview_Kit/new could not generate inputs for 
:sub_sections from App.InterviewKit. Check the field 
exists and it is one of embeds_one, embeds_many, has_one, has_many, 
    belongs_to or many_to_many 

# This error is being shown when trying to render as a string in the method 
    link_to_sub_sections_field() below 

# fields = render_to_string(__MODULE__, "sub_section.html", f: form) 

# Schemas 
schema "interview_kits" do 
    field :name, :string 
    field :description, :string 
    has_many :sections, AppSection 

    timestamps() 
end 

schema "sections" do 
    field :title, :string 
    timestamps() 

    belongs_to :interview_kit, App.InterviewKit 
    has_many :sub_sections, App.SubSection 
end 

schema "sub_sections" do 
    field :field_name, :string 
    belongs_to :section, App.Section 
end 

defmodule App.InterviewKitView do 
    def link_to_sub_section_fields() do 
    changeset = InterviewKit.changeset(%InterviewKit{sections: [%Section{sub_sections: [%SubSection{}]}]}) 
    form = Phoenix.HTML.FormData.to_form(changeset, []) 
    fields = render_to_string(__MODULE__, "sub_section.html", f: form) 
    link "Add Sub Section", to: "#", "data-template": fields, id: "add_sub_section" 
    end 
end 

# sub_sections.html.eex 
<%= inputs_for @f, :sub_sections, [multipart: true], fn fo -> %> 
    <div class="row"> 
    <div class="col-md-11"> 
     <%= input fo, :field_name %> 
    </div> 
    <div class="col-md-1"> 
    <a href="#" id="delete_sub_section"><i class="fa fa-trash" aria-hidden="true"></i></a></h5> 
    </div> 
    </div> 
<% end %> 

# what I am trying to accomplish 

interview_params = %{"_csrf_token" => "PDwZA==", 
"_utf8" => "✓", "files" => "", 
"interview_kit" => %{"description" => "<p>dsadasdasmoimoimadsads</p>", 
"name" => "First Interview", "sections" => %{"0" => %{"name" => "sadasdsad"}, 
           "sub_sections" => %{"0" => %{"field_name" => "sadasdsad"}}}}} 

Answer 1

私は、セクションの上に問題が繰り返し強調されなかったた私はセクションの上に改めてする必要があり、なぜ私は完全には理解して確認していない私のsub_section.html.eexに

# sub_section.html.eex 
# Correct way 
<%= inputs_for @f, :sections, [multipart: true], fn fo -> %> 
    <div class="row"> 
    <div class="col-md-11"> 
     <%= inputs_for fo, :sub_sections, [multipart: true], fn po ->%> 
     <%= input po, :field_name %> 
     <% end %> 
    </div> 
    <div class="col-md-1"> 
     <a href="#" id="delete_sub_section"><i class="fa fa-trash" aria-hidden="true"></i></a></h5> 
    </div> 
    </div> 
<% end %> 

# sub_section.html.eex 
# Wrong way 
<%= inputs_for @f, :sub_sections, [multipart: true], fn fo -> %> 
    <div class="row"> 
    <div class="col-md-11"> 
     <%= input fo, :field_name %> 
    </div> 
    <div class="col-md-1"> 
    <a href="#" id="delete_sub_section"><i class="fa fa-trash" aria-hidden="true"></i></a></h5> 
    </div> 
    </div> 
<% end %> 

# section.html.eex 
<%= inputs_for @f, :sections, [multipart: true], fn po -> %> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <div class="panel-title"> 
      <%= input po, :name %> 
      </div> 
     </div> 
     <div class="panel-body"> 
     <% inputs_for po, :sub_sections, [multipart: true], fn fo -> %> 
      <div class="row"> 
      <div class="col-md-11"> 
       <%= input fo, :field_name %> 
      </div> 
      </div> 
      <% end %> 
     <h5><a href="#"><%= link_to_sub_section_fields() %></a></h5> 
     </div> 
     </div> 
     <!-- END PANEL --> 
    </div> 
    <%= link "Remove Section", to: "#", id: "delete_section" %> 
    </div> 
<% end %> 

#interview_kit_view.ex 
def link_to_sub_section_fields() do 
    changeset = InterviewKit.changeset(%InterviewKit{sections: [%Section{sub_sections: [%SubSection{}]}]}) 
    form = Phoenix.HTML.FormData.to_form(changeset, []) 
    fields = render_to_string(__MODULE__, "sub_section.html", f: form) 
    link "Add Sub Section", to: "#", "data-template": fields, id: "add_sub_section" 
end 

interview_kit.js 
    handleAdd() { 
    $(document).on("click", "#add_section, #add_sub_section", function(e) { 
     console.log($(e)); 
     e.preventDefault(); 
     let time = new Date().getTime(); 
     let template = $(this).data("template"); 
     let uniq_template = template.replace(/\[0\]/g, `[${time}]`); 
     uniq_template = uniq_template.replace(/_0_/g, `_${time}_`); 
     $(this).after(uniq_template); 
    }); 
    } 

を形成し、私の部分的に形成それは私が探していた提出の正しいparamsを与える。

%{"_csrf_token" => "AlgJcnNQw==", 
    "_utf8" => "✓", "files" => "", 
    "interview_kit" => %{"description" => "<p>dsadsadas</p>", 
    "name" => "name", 
    "sections" => %{"1495809951376" => %{"name" => "sadsadas", 
     "sub_sections" => %{"1495809951376" => %{"name" => "field_param"}}}}}}