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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591098/46bed595-cde4-1524-2397-8ab32dd7658b.png)

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

```ruby:gemfile
gem 'simple_form'
```

```ruby:user.rb
class User < ApplicationRecord
  validates :name, presence: true
  validates :email, presence: true
  validates :age, presence: true
end
```

```ruby:routes.rb
  resources :users
```


```ruby: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```

```ruby: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のコピペです

```ruby: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にアクセスした結果が以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591098/4cabb2c8-434d-964e-95ea-8e4dd8004ed9.png)

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

また、emailとurlはカラム名からsimple_formが判断して、各々最適なバリデーションをしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591098/ee9025c5-4fca-eef8-61b1-1a457bd4eee9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591098/0b03cff7-308c-5a0a-f8f5-5c7ef52a511e.png)

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

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

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

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

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

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

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

```ruby:user_property.rb
class UserProperty < ApplicationRecord
  belongs_to :user

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

```ruby: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
```

```ruby: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```

```ruby: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を使います。

```ruby: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の項目が二つ追加されています。これで完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591098/546048a0-f7a7-4030-e404-5d03c0ec182c.png)

userと同様に、バリデーションエラーが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591098/6e5563d6-c5bd-773e-04bd-9f7cc2d8ff61.png)



以上です