如何在Phoenix Framework中創建雙嵌套表單？

Question

我的問題是，當試圖將子部分添加到嵌套在部分下的我的訪問表單中時，我一直在獲取參數錯誤。

Interview_kit有許多部分，部分有許多子部分。部分屬於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); 
    }); 
    } 

我不知道我完全理解爲什麼我要重申過段在我的部分形成但它給了我正在尋找的提交的正確參數。

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