4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

form_withの使い方について

Last updated at Posted at 2023-03-18

はじめに

オリジナルアプリ実装中にform_withについてほぼ理解できていなかった為、沼にハマりました。form_withを何となく使っていた方やあまり理解できていない方が、この記事を読んで頂いて、少しでも理解が深まれば幸いです。

1. form_with(ヘルパーメソッド)とは??

viewにHTMLタグを出現させたりテキストを加工するために使用するメソッドの総称。
また投稿ページ・編集ページなどにおけるフォームを実装する為のヘルパーメソッドの事です。
ヘルパーメソッドは、他にもlink_toなどその他色々あります。

2.記述方法

form_withの基本構文 [model.ver]
 <%= form_with model: モデルクラスのインスタンス do |form| %>  
    formの内容
 <% end %>
form_withの基本構文 [url.ver]
 <%= form_with url:  path do |form| %>
    formの内容
 <% end %>
form_withの基本構文 [scope.ver]
 <%= form_with scope: :name属性の値, url:path, local: true do |f| %>
   formの内容
 <% end %>

上記がform_withの基本形です。
do~endの間にformの記述を行い、処理が行われます。

3 form_withの特徴

  • インスタンス変数の中が、newアクションで新規作成されたインスタンスの場合はcreateアクションが実行
  • インスタンス変数の中に、既に存在するレコードがある場合はupdateアクションが実行

この2つの条件で自動的にcreate・updateの処理の分岐を行なってくれます。
具体例を以下のコードに記述します。

4.解説

birthdays_controller.rb
  def new
    @birthday = Birthday.new
  end
new.html.erb
<%= form_with model: @birthday, local: true do |f|%>
   <div class="field">
   #〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 省略
   <div class="actions">
   <%= f.submit "登録する", class: :form_btn  %>
   </div>
<% end %>

新規登録ページで登録するをクリックすると、 birthdays_controllerで定義した変数@birthdayの中身は新規作成されたモデルのインスタンスが入っており、このインスタンスがsaveされると、保存されたモデルのインスタンスとなり、createアクションが動きます。

birthdays_controller.rb
   def edit
     @birthday = Birthday.find(params[:id])
   end
edit.html.erb
<%= form_with model: @birthday, local: true do |f|%>
   <div class="field">
  # 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜  省略
   <div class="actions">
   <%= f.submit "更新する", class: :form_btn  %>
    </div>
<% end %>

編集ページで更新するをクリックすると、birthdays_controllerの@birthdayの中身に情報(レコード)は入っているので、updateアクションが動きます。

5、少し余談

edit.html.erb(編集ページ)でインスタンス変数の記述を@birthdayではなく@Birthdayと定義してしまい、受け渡しができず、ずっとルーティングエラーがでていました。
タイポミスで膨大な時間を費やしてしまうので、必ず一旦、冷静になり、現状を言語化しながら紙に書き出す事をしていきたいですね。
また皆さんは、タイポを無くすために工夫されていることはありますでしょうか??
コメント頂けたら幸いです。

ここまで、見ていただきありがとうございます。

4
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?