Rails 一日一つメソッド (Day15) form_withメソッド

 

Rails 一日一つメソッド (Day15) form_withメソッド

 

form_withメソッドとは

 - form_withとは、railsで情報を送信するためのヘルパーメソッドで、form_withを使うことによって、簡単に入力フォームに必要なHTMLを作成することができる。

 

1) 入力された情報をデータベースに保存しない時

<% form_with url: "Pass" do |form| %>
	<!-- Form内容 -->
<% end %>

 

2) 入力された情報をデータベースに保存する時

<%= form_with model: ModelClassのインスタンス do |form| %>
	<!-- Form内容　-->
<% end %>

 

---

form_withメソッドの使い方

1) model Option

<%= form_with model: Modelのインスタンス do |form| %>
	<!-- Formの内容 -->
<% end %>

 

2) url Option

<%= form_with url: root_path do |form| %>
	<!-- Formの内容 -->
<% end %>

 

---

form_withの引数

users_controller.rb

def new
	@user = User.new
end

Controllerで作成したインスタンスがnewメソッドで新たに作成されて何も情報を持っていなければ自動的にcreateアクション、findメソッドなどで作成され、すでに情報を持っている場合はupdateアクションへ自動的に振り分けてくれる。

 

view

<%= form_with model: @user do |form| %>
	<%= form.field :name %>
    <%= form.submit %>
<% end %>

 

<form action="/users" method="post" data-remote="true">

 

---

ネストをしている時の書き方

users_controller.rb

def new
	@article = Artice.find(params[:article_id])
    @comment = Comment.new
end

def edit
	@artice = Artice.find(params[:article_id])
    @comment = Comment.find(params[:id])
end

 - newアクションは'Articel'モデルの特定のインスタンスを探し、新しい Commentインスタンスを生成する。

 - @artucle = Artice.find(params[:article_id])はURLで渡された 'article_id'をパラメータを使って 'Article'DataBaseで該当する記事を探す。

 - @comment = Comment.newは 'Comment'オブジェクトを生成してFormで使う準備をする。

 

View

<%= form_with model: [@article, @commnet] do |form| %>
	<%= form.field :text %>
    <%= form.submit %>
<% end %>

 - form_with model: [@article, @comment] do |form| は '@articel'と '@comment'インスタンスを使ってFormを生成する。

 - URLとHTTPメソッドは @articeと@commentの状態によって決定される。

 

---

html属性の付け方

<%= form_with @user, 属性: '属性値' do |form| %>

<%= form_with @user, id: 'new_form' do |form| %>

 - form_withを使って '@user'モデルに対するFormを生成し、Form Tagに 'id'属性を 'new_form'で指定している。

 

---

アクション名で記述する

 - ルーチィングがうまく浮かない時は直接Controller名とアクション名を指定することもできる。

<%= form_with @user, url: { controller: 'users', action: 'index' } do |form| %>
	<%= form.text_field :name %>
    <%= form.submit %>
<% end %>

 

---

form_withで使用するhtmlタグ

メソッド	用途
form.text_field	一行のテキスト投稿フォーム
form.text_area	複数行のテキスト投稿フォーム
form.number_field	数値入力ボックスを生成
form.search_field	一行の検索フォーム
form.email_field	emailアドレス入力boxを生成
form.check_box	DataBaseの情報を使わないでCheck Boxを生成
form.collection_check_boxes	DataBaseの情報を元にCheck Boxを生成
form.select	選択肢を作成
form.collection_select	DataBaseの情報を元に選択肢を生成
form.file_field	file選択Boxを生成
form.datatiem_field	日時の入力欄を生成
form.hidden_field	非表紙のForm
form.submit	送信ボタンを生成

 

オプション	用途
class	cssのクラスの指定
size	フォームの幅を指定
maxlength	入力可能な最大文字数の指定

 

form.text_field

<%= form_with model: @question do |form| %>
    <div>
        <ul>
            text_field <%= form.text_field :title, class: "hoge", size: 30 %>
            <%= form.submit %>
        </ul>
    </div>
<% end %>

form.text_area

<div>
    <ul>text_area <br>
        <%= form.text_area :title, class: "hoge", size: 30 %>
    </ul>
    <hr>
</div>

form.number_field

<div>
    <ul>text_number
        <%= form.number_field :id %>
    </ul>
</div>

 

form.search_field

<div>
    <ul>text search
        <%= form.search_field :title %>
    </ul>
    <hr>
</div>

 

form.email_field

<div>
    <ul>email_field
        <%= form.email_field :title %>
    </ul>
    <hr>
</div>

 

form.check_box

メソッド	用途
class	cssのクラスの指定
size	Formの幅を指定
checked	初期状態をチェック状態にする

 

<div>
    <ul>check_box
        <%= form.check_box :sex, {checked: false}, "true", "false" %>
        <%= form.check_box :sex, {checked: false}, "true", "false" %>
        <%= form.check_box :sex, {checked: true}, "true", "false" %>
    </ul>
    <hr>
</div>

 

form.radio_button

<%= form.radio_button "保存されるカラム名", "カラムに保存させる内容">
<%= form.radio_button :gender, "M" %>M <%= form.radio_button :gender, "F"%>F

メソッド	用途
class	cssのクラスの指定
size	フォームの幅を指定
checked	trueと指定するとデフォルトでチェクがついた状態になる

 

form.select

<% from.select :保存されるカラム名, [ ["表紙される文字", "保存される値"], ["表紙される文字", "保存される値”] ], {オプション}, { htmlオプション } %>

<% from.select :foot_id, [ ["りんご",1], ["バナナ",2], ["いちご",3] ], prompt: "好きな果物を選んでください！", { class: "hoge", id: "fuga" } %>