ボクココ

個人開発に関するテックブログ

Rails の form_with の submit 時に定義したいオプション

ども、@kimihom です。

Rails の form_with を使っているだろうか?だいぶ前から form 系はフロントエンド側の実装に任せるというのが一般的になりつつあるが、やはり form_with でささっと作れる便利さは大きい。

form_with サンプルコード

ja:
  activerecord:
    attributes:
      item:
        title: "タイトル"
<%= form_with model: @item, url: item_path, method: :post, local: false, class: "simple-form" do |f| %>
  <%= f.label :title, class: "titleLabel" %>
  <%= f.text_field :title, class: "title", required: "requierd", maxlength: "30" %>

  <%= f.submit "更新", data: { disable_with: '送信中', confirm: "本当によろしいですか?"}, class: "update" %>
<% end %>
class ItemsController < ApplicationController
  def new
    @item = Item.new
  end

  def create
    item = Item.create!(item_param)
    render json: {result: "ok"}
  rescue => e
    render json: {result: "ng"}
  end

  private
  def item_param
    params.require(:item).permit(:title)
  end
end
$(document).on("ajax:success", '.simple-form', function(e){
  let data = e.detail[0];
  if (data.result == "ok") {
    // success
  } else {
    alert("error");
  }
});

$(document).on("ajax:error", function(e) {
  alert("error")
});

このサンプルコードで色々なことが示されている。それぞれ見ていこう。

title label

config/locales/ja.yml にて、それぞれのモデルの attributes の名前を定義しておけば、自動でそれを見にいってくれる。form 送信でエラー時の表示の時など、単にフォームを入力するフォームとしてだけでなく使える。

form_with model

model に適したデータが既に入っていた場合、そのデータがフォームに入力されたフォームを作ってくれる。new だと新規なので少ないかもしれないが、edit の時はものすごく便利というか必須の指定となる。

local: false

この指定により、ajax 経由で form 送信することを指定している。この指定がないと、ajax ではない通常の form 送信となるため、redirect_to でどこかに飛ばす必要が出てくる。

local: false を指定することで、Ajax として$(document).on("ajax:success", '.simple-form', function(e){ の イベントが発生する。そこで レスポンス内容を元に動作を定義することが可能となる。

submit の disable_with, confirm

form で実際に登録しようとするときに、disable_with はもはや必須と言えるかもしれない。form を1度クリックした時点で、もう一度クリックさせないようにするための設定となる。これをセットしておかないと、大切な処理をダブルクリックで2回連続実行されてしまうケースが発生する。

confirm は大切なform処理である場合、いいですかの確認が可能となる。必要に応じてこちらもセットしておくと便利なパラメータである。

終わりに

form に関する実装が一通り綺麗に実装されている。この美しさが Rails だと感じられる瞬間である。

ぜひ知らないことがあれば実装を試してもらえればと思う。