如何使用带有remote:true的simple_form显示验证失败时生成的错误

Question

在使用remote:true在模态内提交表单后，尝试验证模型的属性

<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">

<%= simple_form_for(order, wrapper: :horizontal_form,
wrapper_mappings: {
boolean:       :horizontal_boolean,
check_boxes:   :horizontal_collection,
date:          :horizontal_multi_select,
datetime:      :horizontal_multi_select,
file:          :horizontal_file,
radio_buttons: :horizontal_collection,
range:         :horizontal_range,
time:          :horizontal_multi_select
}, remote: true) do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
<%= f.input :customerName %>
<%= f.input :customerAddress %>
<%= f.input :customerEmail %>
<%= f.input :customerPhoneNumber %>
<%= f.input :restaurantName %>
<%= f.input :restaurantAddress %>
<%= f.input :expectedPickupTime %>
<%= f.input :expectedDeliveyTime %>
<%= f.input :deliveryInstruction %>
<%= f.input :paymentMethod %>
<%= f.input :deliveryFee %>
<%= f.association :employee %>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>

orders_controller.rb响应js并呈现如下错误：

def create
@order = Order.new(order_params)
respond_to do |format|
if @order.save
format.html { redirect_to @order, notice: 'Order was successfully created.' }
format.json { render :show, status: :created, location: @order }
format.js { render :show, status: :created, location: @order }
else
format.html { render :new }
format.json { render json: @order.errors, status: :unprocessable_entity }
format.js   { render json: @order.errors, status: :unprocessable_entity }
end
end

end

提交表格时，我收到以下错误error_screen_show

使用：轨道6.0.3.7ruby 2.7.1p83(2020-03-31修订版a0c7c23c9c([x86_64-darwin19]

响应：

Started POST "/orders" for ::1 at 2021-05-06 14:25:06 +0300
Processing by OrdersController#create as JS
Parameters: {"order"=>{"customerName"=>"", "customerAddress"=>"", "customerEmail"=>"", "customerPhoneNumber"=>"", "restaurantName"=>"", "restaurantAddress"=>"", "expectedPickupTime"=>"15", "expectedDeliveyTime"=>"25", "deliveryInstruction"=>"", "paymentMethod"=>"", "deliveryFee"=>"", "employee_id"=>""}, "commit"=>"Create Order"}
Completed 422 Unprocessable Entity in 2ms (Views: 0.1ms | ActiveRecord: 0.0ms | Allocations: 1749)

Answer 1

通过渲染修复：js 上的new

def create
@order = Order.new(order_params)
respond_to do |format|
if @order.save
format.html { redirect_to @order, notice: 'Order was successfully created.' }
format.json { render :show, status: :created, location: @order }
format.js { render :show, status: :created, location: @order }
else
format.html { render :new }
format.json { render json: @order.errors, status: :unprocessable_entity }
format.js   { render :new }
end
end
end