[JAVA] [Schienen] Zeigen Sie Formularfehlermeldungen asynchron an

Selbst wenn Sie "form_with" ohne "local: true" verwenden, ist der Fehlermeldungsteil normalerweise nicht asynchron. Ich habe versucht, es asynchron anzuzeigen, daher werde ich die Methode zusammenfassen.

Formularansicht

Wenn Sie form_with nicht local: true hinzufügen, erfolgt die Kommunikation asynchron.

erb:app/views/tests/new.html.erb

<%= form_with model: @test do |f| %>      
  <%= f.text_field :name %>
  <%= render 'shared/err_msg' %>
  <%= f.submit %>
<% end %>

erb:app/views/shared/err_msg.html.erb

<div id='err_container' style='display: none'>
  <ul id='err_ul'>
    <!--Ich erhalte hier eine Fehlermeldung-->
  </ul>
</div>

Controller Wenn "@ test.save" fehlschlägt, wird normalerweise "render: new" verwendet, um die Ansichtsdatei für die neue Aktion anzuzeigen. Hier wird sie jedoch in "app / views / shared / err_msg.js.erb" beschrieben. Ich versuche JavaScript auszuführen.

app/controller/tests_controller.rb

def index
  @test = Test.new
end

def create
  @test = Test.new(test_params)
  respond_to do |format|
    if @test.save
      format.js { redirect_to tests_url, notice: 'erstellt' }
    else
      @object  = @test
      format.js { render 'shared/error', status: :unprocessable_entity } #Status im Browser_Gibt den Code 422 zurück
    end
  end
end

private
def test_params
  params.require(:test).permit(:name)
end

Js zeigt eine Fehlermeldung an

Der Stil der gesamten Fehlermeldung wird von "display: none" in "display: block" geändert, und die Fehlermeldung wird in "li" eingeschlossen und angezeigt.

js:app/views/shared/err_msg.js.erb

let err_container = document.getElementById('err_container');
err_container.style.display = 'block';

let err_ul = document.getElementById('err_ul');
<% @object.errors.full_messages.each do |msg| %>
  err_ul.insertAdjacentHTML('afterbegin', '<li><%= msg %></li>');
<% end %>