0

ホットワイヤーを介して新しい詳細レコードを作成するために正常に機能するモーダル フォームがあります。フィールドの中には、flatpickr 日付フィールドと 2 つの flatpickr 時間フィールドがあります。モーダル内に表示されるエラーでフォーム レンダリングに検証エラーがある場合、flatpickr 入力はテキスト フィールドとして flatpickr なしにリセットされます。検証エラーが表示されたときに flatpickr フィールドを再度レンダリングするようにするにはどうすればよいですか?

コントローラーの作成:

def create
@detail = Detail.new(detail_params)
@detail.user_id = current_user.id

respond_to do |format|
  if @detail.save
    format.html { redirect_to details_path, notice: "Detail was successfully created." }
    format.json { render :show, status: :created, location: @detail }
  else
    format.turbo_stream
    format.html { render :new, status: :unprocessable_entity }
    format.json { render json: @detail.errors, status: :unprocessable_entity }
  end
 end
end

create.turbo_stream.erb

<%= turbo_stream.replace "new_detail", partial: "details/form", locals: { detail: @detail } %>

形：

<%= form_with(model: detail, id: dom_id(detail)) do |form| %>
<div class="modal-header">
   <h1 class="h3" id="exampleModalLabel">Post New Detail</h1>
   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
   <% if detail.errors.any? %>
   <div id="error_explanation">
      <h2><%= pluralize(detail.errors.count, "error") %> prohibited this detail from being saved:</h2>
      <ul>
         <% detail.errors.each do |error| %>
         <li><%= error.full_message %></li>
         <% end %>
      </ul>
    </div>
   <% end %>
   <form>
      <div class="mb-3">
         <label class="form-label">Name</label>
         <%= form.text_field :name, class: 'form-control', id: 'floatingInput1' %>
      </div>
      <div class="mb-3">
         <label class="form-label">Description</label>
         <%= form.text_field :description, class: 'form-control', id: 'floatingInput2' %>
      </div>
      <div class="mb-3">
         <label class="form-label">Date</label>
         <%= form.text_field :detail_date, class: 'form-control', id: 'floatingInput3', data: { behavior: "flatpickr" }   %>
      </div>
      <div class="mb-3">
         <label class="form-label">Start Time</label>
         <%= form.text_field :start_time, class: 'form-control flatpickr1', id: 'floatingInput4', data: { behavior: "flatpickr1" }   %>
      </div>
      <div class="mb-3">
         <label class="form-label">End Time</label>
         <%= form.text_field :end_time, class: 'form-control flatpickr2', id: 'floatingInput5', data: { behavior: "flatpickr2" }   %>
      </div>
</div>
<div class="modal-footer">
<%= form.submit class: 'btn btn-primary' %>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</form>
<script>
   $( '.flatpickr1' ).flatpickr({
     enableTime: true,
     noCalendar: true,
     dateFormat: "H:i",
     time_24hr: true
   });
   $( '.flatpickr2' ).flatpickr({
     enableTime: true,
     noCalendar: true,
     dateFormat: "H:i",
     time_24hr: true
   });
</script>
<% end %>
4

1 に答える 1

0

あなたの問題は、scriptタグ内で flatpickr を呼び出していることだと思います。これらの呼び出しを Stimulus コントローラー (Turbo と統合するためのもの) に移動するか、Turbo イベント リスナー内に移動することをお勧めします。基本的に、これは単なるタイミングの問題であり、適切なタイミングで JS をロードするようにページに指示する Turbo 固有の方法があります。

Stimulus コントローラーは非常に単純です。何かのようなもの：

new controller file, e.g. test_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    // call flatpickr here
  }
}

then in form.html.erb, add the stim controller to the form element

<form data-controller="test">
  ...
</form>

イベント リスナーは、この質問で言及されているものと似ています。

 document.addEventListener("turbo:before-fetch-response", function (e) {
   // call flatpickr here
 })
于 2021-11-19T17:12:54.850 に答える