日別アーカイブ: 2022年1月29日

form_forからform_withに移行するには?

form_forからform_withに移行する

before:users/_form.html.erb

<%= form_for user do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
    <div class="inputWithIcon">
    <%= f.text_field :name, class: 'form-field', placeholder: 'Your name' %>
    </div>
  <div class="inputWithIcon">
    <%= f.email_field :email, class: 'form-field', placeholder: 'Email' %>
  </div>
    <%= f.password_field :password, class: 'form-field', placeholder: 'パスワード' %>
    <%= f.password_field :password_confirmation, class: 'form-field', placeholder: 'パスワード確認' %>
    <%= f.submit "登録", class: "btn btn-submit" %>
<% end %>

after:users/_form.html.erb

<div class="new-todo-list-form">
  <%= form_with model: user, local: true do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
      <div class="inputWithIcon">
      <%= f.text_field :name, class: 'form-field', placeholder: 'Your name' %>
      </div>
    <div class="inputWithIcon">
      <%= f.email_field :email, class: 'form-field', placeholder: 'Email' %>
    </div>
      <%= f.password_field :password, class: 'form-field', placeholder: 'パスワード' %>
      <%= f.password_field :password_confirmation, class: 'form-field', placeholder: 'パスワード確認' %>
      <%= f.submit "登録", class: "btn btn-submit" %>
  <% end %>
</div>

local: trueを入れたのはエラーメッセージを表示させるため。

shared/_error_messages.html.erb

<% if object.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      <% object.errors.full_messages.each do |msg| %>
        <li><h4><%= msg %></h4></li>
      <% end %></div>
  </div>
<% end %>

local: trueがない場合表示されないが、local: trueを追加されば表示される。

スコープのprefixを指定するとき(ログイン機能など)

before:sessions/new.html.erb

<h1>ログイン</h1>
<div class="login-form">
  <%= form_for(:session, url: login_path) do |f| %>
    <%= f.label :メールアドレス, class: 'label' %>
    <%= f.email_field :email, class: 'form-field' %>
    <%= f.label :パスワード, class: 'label' %>
    <%= f.password_field :password, class: 'form-field' %>
    <%= f.label :次回ログインを省略する, class: "checkbox inline" do %>
      <%= f.check_box :remember_me %>
      <span>次回ログインを省略する</span>
    <% end %>
    <%= f.submit "ログイン", class: "btn btn-submit" %>
  <% end %>
  <br>
  <%= link_to(content_tag(:i, 'はじめての方はこちら',
                          class: "fas fa-angle-double-right faa-horizontal animated-hover fa-pull-left",
                          style: "color: sienna;"), new_user_path) %>
</div>

after:sessions/new.html.erb

<h1>ログイン</h1>
<div class="login-form">
  <%= form_with scope: :session, url: login_path do |f| %>
    <div class="inputWithIcon">
    <%= f.email_field :email, class: 'form-field', placeholder: 'Email' %>
    <%= f.password_field :password, class: 'form-field', placeholder: 'パスワード' %>
    </div>
    <%= f.label :次回ログインを省略する, class: "checkbox inline" do %>
      <%= f.check_box :remember_me %>
      <span>次回ログインを省略する</span>
    <% end %>
    <%= f.submit "ログイン", class: "btn btn-submit" %>
  <% end %>
  <br>
  <%= link_to(content_tag(:i, 'はじめての方はこちら',
                          class: "fas fa-angle-double-right faa-horizontal animated-hover fa-pull-left",
                          style: "color: sienna;"), new_user_path) %>
</div>

scopeを加えるだけ。