AngularJS と Rails の form_for を組み合わせる

AngularJS と Rails の form_for を組み合わせて使ってみました。何より厄介なのは action 属性が自動でついてしまうことです。

環境

Rails 4.1.8
Ruby 2.2.2
AngularJS 1.4.7
Ubuntu 15.04

状況

Rails の form_for を使うと、 Rails が action 属性からすべて設定してくれます。もちろん、 form タグの属性を追加することもできます。ただし AngularJS を使う上では問題がありました。

問題になるのは次のコードです。

<%=form_for(@user, html: {'data-ng-submit': 'mainCtrl.create()', novalidate: :novalidate, name: 'createForm'}) do |f|%>
<%=f.label :name%>
<%=f.text_field :name, required: :required, 'data-ng-model': 'user.name'%>
<button>submit</button>
<%end%>

<%=form_for(@user, html: {'data-ng-submit': 'mainCtrl.create()', novalidate: :novalidate, name: 'createForm'}) do |f|%>

<%=f.label :name%>

<%=f.text_field :name, required: :required, 'data-ng-model': 'user.name'%>

<button>submit</button>

<%end%>

このコードでは、ボタンをクリックすると AngularJS による処理が実行された後で本来の form の処理が実行されます。

AngularJS は、 action 属性がないときは本来の form の処理を行わないのですが、 Rails で action 属性が自動でつけられている以上どうしようもありません。いや、 action 属性を消す方法があるのかもしれませんが、私は見つけることができませんでした。

解決法

form タグに onsubmit="return false;" を付け加えます。

<%=form_for(@user, html: {'data-ng-submit': 'mainCtrl.create()', novalidate: :novalidate, name: 'createForm', onsubmit: "return false;"}) do |f|%>
<%=f.label :name%>
<%=f.text_field :name, required: :required, 'data-ng-model': 'user.name'%>
<button>submit</button>
<%end%>