验证失败时未呈现的一个表单元素

时间:2016-08-17 20:17:16

标签: ruby-on-rails forms cocoon-gem

我无法弄清楚这是一个simple_fields_for问题,一个茧问题还是其他问题。如果我因</div>展示位置而失误,我就看不到了。

首次显示表单时,它会呈现协议名称的输入字段。用户可以单击按钮以添加感兴趣的表单元素。这很好,看起来像这样:

enter image description here

以下是用户点击每个“添加元素”按钮后的效果:

enter image description here

用户可以添加0..many的每个元素。当他们点击“保存”时,一切都运行良好。

如果其中一个字段中存在验证错误,则表单会重新呈现,但有一个例外。 “成像步骤”元素的验证错误根本不会重新显示。其他元素重新渲染,并在验证失败时按预期突出显示。

这是一个图片示例。用户填写表单的一部分,忘记选择“序列”并忘记输入“提示描述”的文本:

enter image description here

单击“保存”并且验证失败后,表单将重新呈现如下:

enter image description here

如您所见,“成像步骤”部分尚未重新绘制。

如果我在视图的上下文中看到params,似乎一切都在那里。 @ protocol.errors看起来也适合我。模特似乎也好。

这是pastebin of the form code

这是pastebin of _step_item_fields.html.erb

这是pastebin of _tip_fields.html.erb

这是pastebin of my Gemfile

更新:

如果我像这样建立一个step_item:

<div id="step_items">
    <%= f.simple_fields_for :step_items, @protocol.step_items.build do |si| %>
        <%= render 'step_item_fields', :f => si %>
    <%end%>
</div>

始终绘制“成像步骤”部分,但在验证失败时(显然)不会填充。这也混淆了让用户添加/删除0..many Imaging Steps。

的功能

我也尝试过:

<div id="step_items">
    <%= f.simple_fields_for :step_items, @protocol.step_items.build(protocol_params) do |si| %>
        <%= render 'step_item_fields', :f => si %>
    <%end%>
</div>

...以及protocol_params可用时的其他变体,但是遇到了禁止的params问题。

UPDATE2:

我还尝试使用params为step_item构建一个哈希。我可以在这里使用它:

<div id="step_items">
    <%= f.simple_fields_for :step_items, @protocol.step_items.build(some_ok_params) do |si| %>
        <%= render 'step_item_fields', :f => si %>
    <%end%>
</div>

...但仅适用于单个step_item。我不知道如何传递反映0..many功能的哈希散列。此外,以这种方式构建step_item会正确填充表单元素,但不包括突出显示样式的错误。这是我开始想知道为什么更简单的解决方案无效的时候。

1 个答案:

答案 0 :(得分:0)

由于StepItem是STI类Step的子类型,我认为StepItems的错误检测被错过了。我在这里解决的黑客并不漂亮,而且确实很脆弱。如果你有一个更好的方法,请发布。

我在_form.html.erb中更改了此内容:

...

<%if params["protocol"] && params["protocol"]["step_items_attributes"].present?%>
    <%params["protocol"]["step_items_attributes"].each do |sia|%>
        <%v = sia[1]%>
        <div id="step_items">
            <%= f.simple_fields_for :step_items, @protocol.step_items.build(:orientation_id => v["orientation_id"], :sequence_id => v["sequence_id"], :note => v["note"], :id => v["id"], :protocol_id => v["protocol_id"], :institution_id => v["institution_id"] ) do |si| %>
                <%= render 'step_item_fields', :f => si%>
            <% end %>
        </div><!-- end step_items-->
    <%end%>
<%else%>

...

我在_step_item_fields.html.erb中更改了此内容:

...

<div class="nested-fields">
    <div class= "form-inputs">
        <div class="row">
            <div class="col-sm-2 text-right">Imaging Step:</div>
                <div class="col-sm-2 drop_col ">                
                    <%= f.collection_select :orientation_id, Orientation.where("institution_id=?",current_user.current_institution_id),:id,:name,  {:prompt => "Pick an Orientation", }, {class: "form-control #{"dropdown_error" if f.object.orientation_id.blank? && (f.object.sequence_id.present? || f.object.note.present?)}"}%>
                </div>              
                <div class="col-sm-2 drop_col ">
                    <%= f.collection_select :sequence_id, Sequence.where("institution_id=?",current_user.current_institution_id),:id,:name, {:prompt => "Pick a Sequence"}, {class: "form-control #{ "dropdown_error" if f.object.sequence_id.blank? && (f.object.orientation_id.present? || f.object.note.present?) }"}%>                              
                </div>              
        </div>

        <div class="row">
            <div class="col-sm-2"></div>
                <%= f.input :note, :wrapper_html =>{:class => 'col-sm-8'}, label: false, placeholder: 'You can put an optional note here.' , :input_html => {:size => 50}%>
                <%= f.input :institution_id,:as => :hidden, :input_html => {:value=>current_user.current_institution_id}  %>
                <%= f.input :id,:as => :hidden  %>
            <div class="col-sm-2">
                <%= link_to_remove_association "Remove Imaging Step", f , :class=>"btn btn-danger btn-xs placemid",title: "Click here to delete this imaging step.", data: {toggle: "tooltip", placement: "auto", animation: true,  delay: {show: 700, hide: 100}}%>
            </div>
        </div>
    </div>
    <div class="col-sm-12"><hr></div>
</div>

...

我将其添加到正确的样式表中:

.dropdown_error{
    color: red;
}

表单现在正确显示StepItem错误,如下所示:
enter image description here