Railsのform_withヘルパーと素のformタグのネスト(というかHTMLのformタグ自体のネスト)に注意

概要

先日、会社のフロントエンドエンジニアが Rails の view ファイルにモック的なのを書いてくれたのに対して、自分が実装をあてていったときにちょっとハマったのでメモ。

モックでは素の form タグが書かれていたのだけど、それに気づかずに別の箇所に form_with ヘルパーを書いてネストさせてしまったことがあり、期待どおりに submit が走らないことがあった。

(そもそもなぜ既存の form タグとは別の箇所に記述してしまったかは自分でもわからないw)

form_with ヘルパーと素の form タグをネストしていると、先(上位)に書いているほうが優先される。

というか、素の form タグ自体、ネストさせると先に書いたほうが優先されるみたいだった。¹

なので、素の form タグを先に書くと form_with ヘルパーで自動生成される諸々の属性が反映されない。

(例として Post というモデルを使用)

<%= form_with model: @post, local: true do |f| %>
  <form>
    <div>
      <!-- 何らかの記述 -->
    </div>
  </form>
<% end %>

action などの属性が設定されている。

<form>
  <%= form_with model: @post, local: true do |f| %>
    <div>
      <!-- 何らかの記述 -->
    </div>
  <% end %>
</form>

action などの属性が何もない素の form タグになっている。

(自分はこのパターンで実装してしまい、submit が期待したとおりに動かず地味にハマってしまった)

<form class="hoge">
  <form class="fuga">
    <div>
      <!-- 何らかの記述 -->
    </div>
  </form>
</form>