소개

안녕하세요. 엔지니어 목표로 수행중인 너구리입니다.

form은, view와 데이타베이스와의 교차하는 점이므로, 여러가지 기술이 어렵지요.
이번에는, select에 의한 풀다운 리스트를 구현하는데 있어서, 여러가지 시행착오를 했으므로, 자신의 비망을 위해서도 기록을 남겨 두려고 생각합니다.

데이터베이스 및 데이터 유형 정보

전제로서, 지금, 레스토랑 정보를 등록하는 먹어 로그와 같은 사이트를 만들고 있습니다.
테이블 이름은 restaurants입니다.

낮 예산, "budget_d"의 항에 대해 select에서 옵션을 선택할 수 있도록하고 싶습니다.

먼저 restautrants 테이블에 budget_d 열을 만들고 거기에 integer 형식으로 데이터를 넣습니다.

# migrationファイル

class AddColumnToRestaurant < ActiveRecord::Migration[5.2]
  def change
    add_column :restaurants, :budget_d, :integer, default: 0
  end
end

우선 기본 HTML

form 태그의 select 태그를 이용한 기본 HTML은 이런 형태가 됩니다.

# view

<select name="budget_d">
  <option value="0">--</option>
  <option value="1">¥~999</option>
  <option value="2">¥1,000~¥1,999</option>
  <option value="3">¥2,000~¥2,999</option>
  <option value="4">¥3,000~</option>
</select>

그것을 haml로 작성해보십시오.

그것을, haml로 쓰면 이런 느낌. 이하, haml로 기재해 갑니다.

# view

%select{:name => "budget_d"}
            %option{:value => "0"}  --
            %option{:value => "1"}  ¥~999
            %option{:value => "2"} ¥1,000~¥1,999
            %option{:value => "3"} ¥2,000~¥2,999
            %option{:value => "4"} ¥3,000~

그리고 form_with로 작성해 봅시다.

그리고 이것을 form_with를 사용하여 쓰면 이런 느낌.

# view

= form_with model: @restaurant, local: true do |f|
 = f.select :budget_d, [["--", 0],["¥~999", 1],["¥1,000~¥1,999", 2],["¥2,000~¥2,999",3],["¥3,000~",4]]

[["key", "value"], ["key", "value"]... ]
그리고 배열의 왼쪽에 키 (옵션으로 표시하는 값)가 오른쪽에 가치 (데이터베이스로 보내는 값) 표시되고 풀다운 목록 선택이됩니다.
간단한 구현으로 좋으면 이제 선택한 내용을 데이터베이스에 등록할 수 있습니다.

여담(1)

form_with는 기본적으로 view에 JavaScript를 호출하기 때문에,
HTML을 호출하고 싶은 경우에는 local: true가 필요하다고 합니다.

여담(2)

클래스 속성은 제3 인수가 아니면 넣을 수 없기 때문에, 만약 select_box에 클래스를 지정하고 싶을 때에는, 다음과 같이 씁니다.

= f.select :budget_d, [ ここに配列が入ります ], {}, {class: "クラス名"}

enum을 사용하여 사용하기 쉽습니다.

게다가 이것을 enum을 사용해, 사용하기 쉽고, 메인터넌스 하기 쉽게 쓰면 이런 느낌이 됩니다.
enum을 사용하면 if budget_d.default?와 같은 메소드도 사용할 수 있습니다.

# view
= f.select :budget_d, options_for_select(Restaurant.budget_ds.keys)

#model

enum budget_d: {
    default: 0,
    till_1000: 1,
    till_2000: 2,
    till_3000: 3,
    over_3000: 4,
  },  _prefix: true

이 때, haml 쪽에서 「budget_ds」라고 복수형이 되어 있는 것이 포인트입니다.
options_for_select는 배열을 찾는 메소드이므로 복수형이 아니면 잘 인식되지 않습니다.

글쎄, 이제 무사히 풀다운 목록의 내용이 표시됩니다 (해야) ...입니다. . .
여기까지의 트라이 앤 에러, 여러가지 길었습니다. . . . .

enum의 일본어화

그러나 이야기는 여기서 끝나지 않습니다. . .
실은, 이대로라면 리스트의 옵션 및 여러가지 뷰로 enum에 설정한 값이 영어로 표시됩니다.
(아래 그림 참조)



그래서 enum을 일본어화할 필요가 있습니다. . . . 여기서 쓰면 매우 장문이 되어 버리기 때문에, 그것은 또 회를 다시 소개하고 싶습니다. . .

form은 뭔가 힘들지만 시행착오한 덕분에 조금 좋아하게 되었습니다♪
끝까지 읽어 주셔서 감사합니다 ^^

추신

그 후, enum을 일본어화한 기사는, 이쪽에 투고하고 있습니다.

【초보자용】i18n을 이용하여 enum의 f.select 옵션을 일본어화한다[Rails]