【Rails6】flatpickrカレンダーの導入で気をつける事

自作ポートフォリオを作成している時に、bootstrapのカレンダーが使いづらかった為、flatpickrを導入する事にしました。その時に躓いたポイントがあったので、シェアします。

開発環境

• macOS Catalina 10.15.7
• Ruby 2.7.2
• Rails 6.1.1

すでに何かしらのアプリを作っている前提で進めていきます。

まずはこちらの記事をベースにflatpickrを導入

• 【Rails6】flatpickrのカレンダーを使ってDBにパラメータを保存する方法

気をつけないといけなかった点

上記の記事で、

<!-- ***** 以下を追加 ***** -->
<%= form_with model: @calendar do |form| %>
  <input id ="calendar_form" type="text" name="calendar[date]" readonly="readonly" >
  <%= form.submit "送信" %>
<% end %>
<!-- ***** 以上を追加 ***** -->
~~~
という部分があるのですが、

僕のアプリはこのようなフォーム設計になっています。

```erb:view
<%= f.label :visit_date %>
<input id="calendar_form" type="text" name="visit_history[visit_date]" placeholder="日付を設定" class="form-control" readonly="readonly">

ここで name="コントローラー名[バリュー名]という形にし、下記に記載しているコントローラーに合わせてあげる必要があります。

visit_histories_controller.rb

class VisitHistoriesController < ApplicationController
  before_action :set_visit_history, only: [:show, :edit, :update, :destroy]

  # GET /visit_historys
  # GET /visit_historys.json
  def index
    @visit_histories = VisitHistory.all
  end

  # GET /visit_historys/1
  # GET /visit_historys/1.json
  def show
    @visit_history
  end

  # GET /visit_historys/new
  def new
    @visit_history = VisitHistory.new(visit_history_params)
    @visit_history.build_medical_treatment_history
  end

  # GET /visit_historys/1/edit
  def edit
  end

  # POST /visit_historys
  # POST /visit_historys.json
  def create
    @visit_history = current_user.visit_histories.new(visit_history_params)
    if @visit_history.save
      redirect_to client_path(@visit_history.client_id), notice: "VisitHistory was successfully created."
    else
      render :new
    end
  end

  # PATCH/PUT /visit_historys/1
  # PATCH/PUT /visit_historys/1.json
  def update
    if @visit_history.update(visit_history_params)
      redirect_to @visit_history, notice: "VisitHistory was successfully updated."
    else
      render :edit
    end
  end

  # DELETE /visit_historys/1
  # DELETE /visit_historys/1.json
  def destroy
    @visit_history.destroy
    redirect_to client_path(@visit_history.client_id), notice: "VisitHistory was successfully destroyed."
  end

  private

  # Use callbacks to share common setup or constraints between actions.
  def set_visit_history
    @visit_history = VisitHistory.find(params[:id])
  end

  # Only allow a list of trusted parameters through.
  def visit_history_params
    params.require(:visit_history).permit(:visit_date, :fee, :client_id, medical_treatment_history_attributes: [:user_id, :subjective, :objective, :assessment, :plan, :memo])
  end
end

ここで、さきほどの name="コントローラー名[バリュー名]が合っていないと、
ストロングパラメーターのpermitの部分で弾かれてしまい、@visit_hisrotyの中のvisit_dateの値が nilになってしまいます。

失敗例

あまり良く理解して出来ていなかったため、はじめは name="calendar[date]やname="calendar[visit_date]で試していました。

この場合、先程の通りストロングパラメーターで弾かれて、 visit_dateの値が nilになります。

binding.pryでパラメーターを確認してみました。
visit_dateの値が nilになっています。

ターミナル

[1] pry(#<VisitHistoriesController>)> params
=> #<ActionController::Parameters {"authenticity_token"=>"ADamDRCkllatE4r75IMx5YaVQSkqML1tkzc6zhm9uFtqgsQ6uG0JbKWpe4PC8AAryLjP3587W5233WLlp_dqDQ", "visit_history"=>#<ActionController::Parameters {"client_id"=>"1", "fee"=>"5000", "medical_treatment_history_attributes"=>{"user_id"=>"1", "subjective"=>"", "objective"=>"", "assessment"=>"", "plan"=>"", "memo"=>""}} permitted: false>, "calendar"=>#<ActionController::Parameters {"visit_date"=>"2021-03-25"} permitted: false>, "commit"=>"登録", "controller"=>"visit_histories", "action"=>"create"} permitted: false>
[2] pry(#<VisitHistoriesController>)> @visit_history
=> #<VisitHistory:0x00007fd57424f710
 id: 20,
 visit_date: nil,
 fee: 5000,
 client_id: 1,
 user_id: 1,
 created_at: Thu, 25 Mar 2021 17:49:26.938352000 JST +09:00,
 updated_at: Thu, 25 Mar 2021 17:49:26.938352000 JST +09:00>

成功例

visit_dateの中に値がしっかりと入っています。

ターミナル

[1] pry(#<VisitHistoriesController>)> params
=> #<ActionController::Parameters {"authenticity_token"=>"QXCgqasqGOeA9w-vtKOevhC8Bz9e-WHQ8yWr1nYd9skrxMKeA-OH3YhN_teS0K9wXpGJyevyhyDXz_P9yFcknw", "visit_history"=>#<ActionController::Parameters {"client_id"=>"1", "visit_date"=>"2021-03-28", "fee"=>"9000", "medical_treatment_history_attributes"=>{"user_id"=>"1", "subjective"=>"", "objective"=>"", "assessment"=>"", "plan"=>"", "memo"=>""}} permitted: false>, "commit"=>"登録", "controller"=>"visit_histories", "action"=>"create"} permitted: false>
[2] pry(#<VisitHistoriesController>)> @visit_history
=> #<VisitHistory:0x00007fc42c874c48
 id: 23,
 visit_date: Sun, 28 Mar 2021,
 fee: 9000,
 client_id: 1,
 user_id: 1,
 created_at: Thu, 25 Mar 2021 19:17:45.940796000 JST +09:00,
 updated_at: Thu, 25 Mar 2021 19:17:45.940796000 JST +09:00>

まとめ

Rails6でflatpickrを導入する際の記事がほとんど英語のものしか無かったので、今回記事としてまとめてみました。見ていただいた方の参考になれば幸いです。