simple_formを使ってみる/子モデルまで編集する

概要

simple_formは高機能なフォームを自動作成してくれるgemです。https://github.com/heartcombo/simple_form
フォームを作ってくれるだけでなく、エラーメッセージや項目名なども自動で表示します。

今回はテーブルが２つのシンプルなrailsプロジェクトで、
simple_formを使ってみました

※bootstrapやCSSは書いていません

実装

まずは一番シンプルな実装userモデルのみ実装します

gemfile

gem 'simple_form'

user.rb

class User < ApplicationRecord
  validates :name, presence: true
  validates :email, presence: true
  validates :age, presence: true
end

routes.rb

  resources :users

users_controller.rb

class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to user_path(@user)
    else
      render 'users/new'
    end
  end

  private

  def user_params
    params.require(:user).permit(
      :name,
      :email,
      :age,
      :date
    )
  end

下記migrationファイルを実行します。rails db:migrate

db/migrate/20200906_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.integer :age
      t.datetime :date
      t.string :url

      t.timestamps
    end
  end
end

viewファイル(new)にsimple_formを書きます。ほぼreadmeのコピペです

app/views/users/new.html.erb

<%= simple_form_for user do |f| %>
  <%= f.input :name %>
  <%= f.input :email %>
  <%= f.input :age, collection: 18..60 %>
  <%= f.input :date %>
  <%= f.input :url %>
  <%= f.button :submit %>  
<% end %>

これでフォームは表示されます。localhost:3000/users/newにアクセスした結果が以下です。

presenceのバリデーションを設定している項目にはcan't be blank と自動で表示されています。

また、emailとurlはカラム名からsimple_formが判断して、各々最適なバリデーションをしてくれます。

吹き出しのデザインも勝手にsimple_formが生成してくれたものです。

また、dateとageの項目を見れば分かるように、型に応じて入力形式を勝手に変えてくれます

ここに書いたのは一例で、
その他 colorやcountryなど、様々な入力パターンが用意されています。（reademeに書いてあります）
simple_formの使い方はこんな感じです。

子モデルを一緒に編集したい場合

userに紐ついている子モデルを、userモデルから編集することができます。
userモデルが主であるようなページで同時に編集したい場合に使います。

今回は　user_propertyという子モデルを用意します。
user_properties_controller　のcreateアクションではなく、
users_controllerのcreate　で編集をできるようにします。(updateも同様です

またそれによってsubmitボタンを一つにできます。

下に先ほどから変化のあっるファイルを示します。

user_property.rb

class UserProperty < ApplicationRecord
  belongs_to :user

  validates :nickname, presence: true
  validates :hobby, presence: true
end

user.rb

class User < ApplicationRecord
  validates :name, presence: true
  validates :email, presence: true
  validates :age, presence: true

　has_one :user_property
  accepts_nested_attributes_for :user_property
end

users_controller.rb

class UsersController < ApplicationController
  def new
    @user = User.new
　　@user.create_user_property(nickname: "takashi", hobby: "yamamoto")
  end

  private

  def user_params
    params.require(:user).permit(
      :name,
      :email,
      :age,
      :date,
       user_property_attributes: %i[
        nickname
        hobby
      ]
    )
  end

下記migrationファイルを実行します。rails db:migrate

db/migrate/20200906_create_user_property.rb

class CreateUserProperties < ActiveRecord::Migration[5.1]
  def change
    create_table :user_properties do |t|
      t.integer :user_id
      t.string :nickname
      t.string :hobby

      t.timestamps
    end
  end
end

simple_formは以下のようにかきます。
----user_proiperty-----以下が追加した項目です。
simple_field_forを使います。

app/views/users/new.html.erb

<%= simple_form_for user do |f| %>
  <%= f.input :name %>
  <%= f.input :email %>
  <%= f.input :age, collection: 18..60 %>
  <%= f.input :date %>
  <%= f.input :url %>

-------user_property----------  

  <%= f.simple_fields_for :user_property, user.user_property do |ff| %>
    <%= ff.input :nickname %>
    <%= ff.input :hobby %>
  <% end %>

  <%= f.button :submit %>  
<% end %>

これでできたのが以下です
user_propertyの項目が二つ追加されています。これで完了です。

userと同様に、バリデーションエラーが表示されます

以上です