Rails：如何在编辑表单中保持至少一个表单部分显示

Question

在railscasts #196 Nested Model Form 之后，我能够在我的表单中实现一个有效的添加/删除功能。

问题是当我删除最后一个表单部分、提交和编辑表单时。表单部分为空，仅显示“+ 添加更多”链接（因为我在提交表单时删除了其他链接？）。

默认情况下，我使用@userprofile.programs.build，因此表单在第一次创建时会构建一个程序部分。

userprofiles_controller.rb

def new
  @userprofile = Userprofile.new(params[:userprofile])
  @userprofile.programs.build
end

_form.html.erb

<h3>Programs</h3>

<%= f.fields_for :programs do |builder| %> 
  <%= render 'program_fields', f: builder %>
<% end %>

<div class="field">
  <%= link_to_add_fields "+ Add More", f, :programs %>
</div>

_program_fields.html.erb

<fieldset>  

  <%= f.select :program_name,  [['A'], ['B']], { label: "Program Name: ", :include_blank => "Please select a program...", { class: "form-control" } %>

  <%= f.select :program_role,  [['Student'], ['Teacher']], { label: "Program Role: ", :include_blank => "Please select your role..." }, { class: "form-control" } %>

  <%= f.hidden_field :_destroy %>
  <%= link_to "Delete", '#', class: "remove_fields" %>

</fieldset>

当编辑表单为空时，不确定如何或是否需要添加条件并在 userprofiles_controller.rb 中构建？因此，如果整个部分被删除，它仍然默认显示一个表单部分，而不仅仅是一个带有“+ 添加更多”链接的空部分。

或者，如果有某种方式无法删除第一个程序部分。但是其余添加的有“删除”功能？

任何见解都会有所帮助，谢谢！

更新：

userprofiles.js.coffee

$(document).on 'click', 'form .remove_fields', (event) ->
  $(this).prev('input[type=hidden]').val('1')
  $(this).closest('fieldset').hide()
  event.preventDefault()

Answer 1

假设您有以下 HTML——我添加了几个类：

_form.html.erb

<div class="programs-form">
  <h3>Programs</h3>

  <div class="programs-fields">
    <%= f.fields_for :programs do |builder| %> 
      <%= render 'program_fields', f: builder %>
    <% end %>
  </div>

  <div class="field">
    <%= link_to_add_fields "+ Add More", f, :programs %>
  </div>
</div>

_program_fields.html.erb

<fieldset class="program">  
  <%= f.select :program_name,  [['A'], ['B']], { label: "Program Name: ", :include_blank => "Please select a program...", { class: "form-control" } %>

  <%= f.select :program_role,  [['Student'], ['Teacher']], { label: "Program Role: ", :include_blank => "Please select your role..." }, { class: "form-control" } %>

  <%= f.hidden_field :_destroy %>
  <%= link_to "Delete", '#', class: "remove_fields" %>

</fieldset>

然后，假设您在应用程序的某处加载了 jQuery，您可以运行以下脚本：

$(function () {
  $('a.remove_fields').hide();

  $('.programs-fields').on('change', function (ev) {
     if ($('fieldset.program').length > 1) {
       $('a.remove_fields').show();
     }
  });
});

我还没有机会设置测试环境并运行此代码，所以如果您有任何问题，请告诉我——我将非常乐意修复任何错误！