Railsのform_withで読み取り専用にするいくつかの書き方

はじめに

railsではアクションの種類など、特定の条件に基づいてフォームのフィールドを編集可能、編集不可、または読み取り専用にすることができます。

本記事はform_withで読み取り専用にする手段や書き方についての詳細になります。

条件分岐を使用する

• 登録画面: 商品コードを入力可能にする
• 編集画面: 商品コードを入力可能にする

コード例

<div class="col-6">
  <label>
    <%= t('activerecord.attributes.product.code') %>
  </label>
  <% if action == 'edit' %>
    <%= f.text_field :code, id: :product_code, disabled: true %>
  <% else %>
    <%= f.text_field :code, id: :product_code %>
  <% end %>
</div>

この方法ではaction == ‘edit’をif文で書いています。

方法2: 等価演算子を使用する

ケース: 学生の登録と編集

• 登録画面: 学生番号を入力可能にする
• 編集画面: 学生番号を入力不可にする

コード例

<div class="col-6">
  <label>
    <%= t('activerecord.attributes.student.number') %>
  </label>
  <%= f.text_field :number, id: :student_number, disabled: action == 'edit' %>
</div>

上記の例では演算子を用いています。個人的にはif文を書かずに等価演算子を使用するほうが好みです。

読み取り専用属性の使用

読み取り専用属性（readonly）を使用すると、フィールドはユーザーによって編集できなくなりますが、フォームとして送信する際に値が送信されます。

disabled属性とは異なり、readonly属性は値を送信します。

コード例

<div class="col-6">
  <label>
    <%= t('activerecord.attributes.student.number') %>
  </label>
  <%= f.text_field :number, id: :student_number, readonly: action == 'edit' %>
</div>

disabled属性

機能

disabled属性が設定されたフォーム要素は、ユーザーによる操作が完全に無効化されます。

送信

フォームが送信される際、disabled属性が設定された要素の値は送信されません。

見た目

通常、disabled属性が設定された要素は、視覚的にも無効化された状態（グレーアウトなど）で表示されます。

使用ケース

ユーザーが特定の条件下でそのフィールドを編集することが完全に不適切な場合に使用します。

readonly属性

機能

readonly属性が設定されたフォーム要素は、ユーザーによる編集ができなくなりますが、その他の操作（選択、コピーなど）は可能です。

送信

フォームが送信される際、readonly属性が設定された要素の値も送信されます。

見た目

readonly属性が設定された要素は、通常の要素とほとんど見た目の違いはありませんが、編集はできません。

使用ケース

ユーザーが値を見ることはできるが、編集はできないようにしたい場合に使用します。例えば、編集画面で一部のフィールドを編集不可にしたい場合など。

まとめ

条件分岐や等価演算子を使用して、特定の条件下でフォームのフィールドを編集可能、編集不可、または読み取り専用にすることができる

**disabled**と**readonly**の違いを理解し、適切な場合に使用することが重要