Rails 7 Web应用表单数值字段无法显示问题求助

升级至Ruby 3.0.3 + Rails 7.0.2后，simple_form构建的工时填报表单中，整数类型的下拉字段（from_hour、from_minute等）值短暂显示后消失，核心原因是类型不匹配：

• Rails 7环境下，simple_form为整数字段生成下拉选项时，<option>的value属性会被渲染为字符串格式（如"8"）；
• 通过gon传递给AngularJS的billable_item.from_hour是整数类型（如8）；
• AngularJS双向绑定时会严格校验类型，字符串与整数不匹配，导致框架认为选中值无效，自动清空字段，表现为值短暂闪烁后消失。

字符串集合字段（如from_unit、all_day）无此问题，是因为前后端传递的都是字符串类型，匹配一致。

方案1：统一集合键值类型（推荐，无需修改前端） #

修改集合定义为键值对数组，确保下拉选项的value与后端传递的整数类型逻辑一致：

# 集合定义修改
Hours = (0..12).map { |hour| [hour, hour] }
Minutes = [0, 15, 30, 45].map { |min| [min, min] }

然后在表单中显式指定值与标签的取值方法（simple_form默认支持数组的数组，但显式指定更稳妥）：

.row
  .col-md-3
    = f.input :from_hour, 
              :collection => Hours,
              :value_method => :first,
              :label_method => :last,
              :include_blank => false,
              :input_html => { "ng-model" => "billable_item.from_hour", "ng-change" => "computeTime()" }
  .col-md-3  
    = f.input :from_minute, 
              :collection => Minutes,
              :value_method => :first,
              :label_method => :last,
              :include_blank => false,
              :input_html => { "ng-model" => "billable_item.from_minute", "ng-change" => "computeTime()" }

此方法让simple_form生成的<option>的value与后端传递的整数逻辑对齐，AngularJS绑定类型匹配，不会清空字段。

方案2：显式指定控件类型为select #

直接告诉simple_form为整数字段生成下拉控件，而非自动使用数值输入框，同时保留下拉选项：

.row
  .col-md-3
    = f.input :from_hour, 
              :as => :select,
              :collection => Hours,
              :include_blank => false,
              :input_html => { "ng-model" => "billable_item.from_hour", "ng-change" => "computeTime()" }
  .col-md-3  
    = f.input :from_minute, 
              :as => :select,
              :collection => Minutes,
              :include_blank => false,
              :input_html => { "ng-model" => "billable_item.from_minute", "ng-change" => "computeTime()" }

此方法跳过simple_form的字段类型自动推断，强制生成下拉控件，同时配合AngularJS的类型隐式转换，解决选中值丢失问题。

方案3：修改AngularJS绑定逻辑（需调整前端） #

如果无法修改后端代码，可在前端通过ng-model-options处理类型转换：

= f.input :from_hour, 
          :collection => Hours,
          :include_blank => false,
          :input_html => { 
            "ng-model" => "billable_item.from_hour", 
            "ng-model-options" => "{ getterSetter: true }",
            "ng-change" => "computeTime()" 
          }

然后在AngularJS控制器中添加 getter/setter 方法处理类型转换：

// 以from_hour为例，其他整数字段同理
$scope.billable_item.from_hour = function(val) {
  if (angular.isDefined(val)) {
    // 将字符串值转为整数
    $scope.billable_item._from_hour = parseInt(val, 10);
  }
  // 返回整数类型的值
  return $scope.billable_item._from_hour;
};

此方法通过前端逻辑统一类型，解决不匹配问题，但需要额外修改前端代码。

1. 启动服务后进入编辑页面，检查整数下拉字段的选中值是否稳定显示；
2. 修改字段值后提交，验证数据库存储的数值是否正确；
3. 新增记录时确认默认值（如from_hour=0）是否正常显示。

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