bootstrap_form を使って devise の form_for を form_with に置き換える

「Rails中級チュートリアル」に取り組んでいて実践したことのメモです📝

本文中では、form_for が使われていますが、Rails5.1 からform_with の使用が推奨されているので、変更に挑戦！

参考 : Railsガイド「form_forとform_tagのform_withへの統合」

bootstrap_form gem をインストール

Gemfile

gem 'bootstrap_form'

bootstrap_form の GitHub の README を見ると form_withでの使用方法 が書かれているので、それを参考にします。（コピペすると全角記号で死ぬので注意です）

devise のフォームを bootstrap_form & form_with バージョンに変更

参考 : 【Rails】deviseのビューのform_forをform_withに置き換える

app/views/devise/sessions/new.html.erb

<%= bootstrap_form_with(model: @user,
                                url: session_path(resource_name),
                              local: true) do |f| %>
        <%= f.email_field :email,
                          autofocus: true,
                        placeholder: 'メールアドレスを入力してください' %>
        <%= f.password_field :password,
                            autocomplete: "off",
                             placeholder: 'パスワードを入力してください' %>

        <% if devise_mapping.rememberable? %>
          <%= f.check_box :remember_me %>
        <% end %>

        <%= f.submit "ログイン" %>

      <% end %>

🔼こんな感じのフォームが簡単に作成できます ✅

生成される HTML の Eメール入力欄をみてみると、

<input autofocus="autofocus" placeholder="メールアドレスを入力してください" class="form-control" type="email" value="" name="user[email]" id="user_email">

となっており、クラスで form-controlを追加しなくても勝手に付いてくれるようですね！

ログインボタンにはこのようなクラスが付与されています。

<input type="submit" name="commit" value="ログイン" class="btn btn-secondary" data-disable-with="ログイン">

ログインボタンのクラスを変更してみました。

<%= f.submit "ログイン", class: 'form-control btn btn-info' %>