Rails表单：nil字段视图显示Null但提交时不传递值的实现问题

根据你的需求，要实现字段值为nil时视图显示"Null"，但提交时不传递该值（视为nil），这里有几个实用的方案，结合你现有的代码来调整：

方案1：后端参数过滤（最简单，无需修改前端逻辑） #

既然你的字段是readonly: true，用户没法修改它的值，那直接在后端处理提交的参数就好。当服务器收到"Null"字符串时，把它转换成nil或者直接删除该参数，这样模型就会视为nil。

步骤： #

1. 保持你的视图和辅助方法不变：

<%= form.text_field :fee, value: finfolio_fee_presence(@account.fee), class: "finfolio-fields__input", readonly: true %>

def finfolio_fee_presence(value)
  value.nil? ? "Null" : value
end

2. 在控制器的强参数方法里添加处理逻辑：

def account_params
  # 如果fee字段的值是"Null"，直接删除该参数，让模型保持nil
  if params[:account]&.[](:fee) == "Null"
    params[:account].delete(:fee)
  end
  # 或者也可以转换成nil：params[:account][:fee] = nil if params[:account]&.[](:fee) == "Null"
  
  params.require(:account).permit(:fee, ...# 其他字段...)
end

这样提交时，即使表单发送了"Null"，后端会直接剔除这个参数，模型的fee字段就会保持nil状态，完全符合需求。

方案2：前端JS拦截提交（适合需要动态处理的场景） #

如果你的字段未来可能变成可编辑的，或者想在前端直接处理掉这个值，可以在表单提交前检查字段内容，把"Null"清空，这样提交时就不会传递该字段。

步骤： #

1. 给你的input添加一个id，方便JS选择：

<%= form.text_field :fee, value: finfolio_fee_presence(@account.fee), class: "finfolio-fields__input", readonly: true, id: "fee_input" %>

2. 添加表单提交监听的JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form'); // 替换成你的表单选择器，比如#account_form
  const feeInput = document.getElementById('fee_input');

  form.addEventListener('submit', function(e) {
    // 如果字段值是"Null"，清空它，提交时就不会传递这个参数
    if (feeInput.value === 'Null') {
      feeInput.value = '';
    }
  });
});

辅助方法保持不变，这样提交时字段为空，后端不会收到fee参数，模型自然视为nil。

方案3：隐藏字段+显示字段（适合只读场景的优雅处理） #

因为字段是只读的，我们可以用一个隐藏字段来传递真实值，用一个普通文本字段只做显示用，这样提交时只有真实值被传递。

步骤： #

1. 修改视图代码，添加隐藏字段：

<%# 隐藏字段：传递真实的fee值（nil或实际数值） %>
<%= form.hidden_field :fee, value: @account.fee %>

<%# 显示字段：只用来展示转换后的值，readonly且不绑定到模型字段 %>
<%= text_field_tag nil, finfolio_fee_presence(@account.fee), class: "finfolio-fields__input", readonly: true %>

2. 后端处理空字符串转nil（如果需要）：
   如果@account.fee是nil，隐藏字段会提交空字符串，所以在强参数里转成nil：

def account_params
  params[:account][:fee] = nil if params[:account]&.[](:fee).blank?
  params.require(:account).permit(:fee, ...# 其他字段...)
end

这种方式完全分离了显示和提交逻辑，不会有字符串传递的问题，也不需要额外JS。

内容的提问来源于stack exchange，提问作者Bitwise