はじめに

Ruby on Rails5　速習実践ガイドのアウトプットで投稿しています。
今回は、レコードの登録前に「こちらの内容で登録します」などの確認画面を表示する機能について投稿します！例として、タスク管理アプリケーションを作成しています。

アクションを作成する

まずは、確認画面に遷移するアクションをcontrollerに作成します。

app/controller/tasks_controller.rb

def confirm_new
  @task = current_user.tasks.new(task_params)
  render :new unless @task.valid?
end

ルーティングの追加

今回はタスクにネストさせるため以下のように設定します。

config/routes.rb

resources :tasks do
  post :confirm, action: :confirm_new, on: :new
end

この記述によって、/tasks/new/confirmというURLが生成されます。

ビューの追加と編集

追加

まず、確認画面のビューを作成します。

app/views/tasks/confirm_new.html.slim

h1 登録内容の確認

= form_with model: @task, local: true do |f|
  table.table.table-hover
    tbody
      tr
        th= Task.human_attribute_name(:name)
        td= @task.name
        = f.hidden_field :name
      tr
        th= Task.human_attribute_name(:description)
        td= simple_format(@task.description)
        = f.hidden_field :description
  = f.submit '戻る', name: 'back', class: 'btn btn-secondary mr-3'
  = f.submit '登録', class: 'btn btn-primary'

この画面を表示するタイミングでは、データは保存されていません。このあとにcreateメソッドを実行するときにデータが必要なので、hidden_fieldで前の画面のデータをユーザーからは見えないように保持して渡すようにしています。

編集

次に、新規追加画面の遷移先を確認画面に設定しておきます。

app/views/tasks/new.html.slim

= form_with model: @task, local: true, url: confirm_new_task_path do |f|
  .form-group
    = f.label :name
    = f.text_field :name, class: 'form-control', id: 'task-name'
  .form-group
    = f.label :description
    = f.text_area :description, rows: 5, class: 'form-control', id: 'task_description'
  = f.submit "確認", class: 'btn btn-primary'

戻るボタンの実装

確認画面の戻るボタンが押されたときの処理を実装していきます。先ほど作成した確認画面の戻るボタンには、name属性に「back」をつけています。このボタンを押したときにparams[:back]というパラメータが送られるので、このparamsがあれば、newメソッドにレンダーするという流れで実装します。

app/controllers/tasks_controller.rb

def create
    @task = current_user.tasks.new(task_params)
    if params[:back].present?
      render :new
      return
    end
    if @task.save
      redirect_to tasks_url
    else
      render :new
    end
  end

以上で、確認画面の実装は終了です！

参考文献

現場で使える Ruby on Rails 5速習実践ガイド

railsでレコード登録前に確認画面を表示する