Help us understand the problem. What is going on with this article?

Formtasticでオリジナルinputを作ってみた

More than 3 years have passed since last update.

シチュエーション

Formtasticは最初から多数のinput形式が利用可能で、大半の要件はその範囲内で片付きますが、たまにその範囲を逸脱したい場合があり、そのために自作inputを作れるようになっています。この機能を使って、「textareaが2つあるinput」を作ってみました。

実装

app/inputs/double_text_input.rb
class DoubleTextInput < Formtastic::Inputs::TextInput
  def to_html
    # FIXME: gemとかに切り出すときは width:calc(40% - 22pt) というstyleを適用させる
    input_wrapping do
      label_html <<
      builder.text_area(method, input_html_options) <<
      build_second_text_area
    end
  end

  private
  def build_second_text_area
    original_method = method
    self.method = :"#{original_method}_2"
    text_area = builder.text_area(method, input_html_options)
    self.method = original_method
    text_area
  end
end

呼ぶときは f.input :description, as: :double_text という感じで呼びます。そうすると

<li class="double_text input optional" id="item_description_input">
  <label for="item_description" class="label">Description</label>
  <textarea rows="20" id="item_description" name="item[description]">
  </textarea>
  <textarea rows="20" id="item_description_2" name="item[description_2]">
  </textarea>
</li>

こんな感じのhtmlが出力されます。見ての通り、2つ目のtextareaのnameに_2をつけてるだけなので、受け取る方が_2をつけた項目を受け取れるようになっている必要があります。

解説

概要

READMEに記載の通り、to_htmlメソッドで返す文字列がそのinputの部分htmlとして使用されるので、ここをいじります。
今回は普通のTextInputのtextareaのうしろに2つ目のtextareaを追加しています。
Formtasticのメソッドの切り方に起因して、ちょっと追加する修正でも親クラスのメソッドをコピーして修正するようなやり方が必要になるケースがままあります。

build_second_text_areaメソッドの処理内容

一時的にmethodというインスタンス変数(Inputクラス共通でattr_accessorが定義してあります)の内容を書き換えています。これには以下の2つの目的があります。

  • textareaのname属性(builder.text_areaの第1引数が使われる)が被らないようにすること
  • input_html_optionsメソッドの中でmethod変数をtextareaのid属性を構成するのに使っていて、そのままtextareaを出力してしまうと、2つのtextareaのid属性が被ってしまうので、それを避けること
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away