如何适配Materialize表单到Rails并保存Product模型记录？

嘿，我来帮你把这个Materialize表格转成能正常保存记录的Rails表单，同时完美保留Materialize的样式组件～

首先先提个小细节：你原来的HTML代码里有几个不符合规范的地方，比如<div>直接嵌套在<tr>标签里、部分标签未闭合，先把这些基础问题修正，再适配Rails表单会更顺畅。

接下来我们一步步来实现：

1. 用Rails表单助手包裹表格结构 #

Rails的form_with（Rails 5.1+推荐）会帮我们自动处理CSRF令牌、模型绑定等核心逻辑，假设你的模型是Product，先搭建基础表单框架：

<%= form_with(model: @product, local: true) do |f| %>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Document</th>
        <th>Description</th>
        <th>Actions</th> <!-- 新增操作列放置提交按钮 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <!-- 后续在这里填充表单元素 -->
      </tr>
    </tbody>
  </table>
<% end %>

2. 适配Materialize组件到Rails表单助手 #

我们要保留Materialize的样式类（比如browser-default、input-field、validate），同时用Rails表单助手生成和模型绑定的输入控件：

日期输入框

对应Product模型的date属性，用f.date_field并保留Materialize的验证样式：

<td>
  <div class="input-field">
    <%= f.date_field :date, class: "validate" %>
    <%= f.label :date %>
  </div>
</td>

下拉选框（Document）

对应模型的document属性，用f.select生成下拉框，加上browser-default类保留Materialize的原生下拉样式：

<td>
  <%= f.select :document, [['Option 1', 1], ['Option 2', 2]], 
               { prompt: 'Choose your option' }, 
               class: 'browser-default' %>
</td>

这里第一个数组是选项的「显示文本/值」对，prompt对应你原来的默认提示选项。

描述文本输入框

对应模型的description属性，用f.text_field保留Materialize的输入框样式：

<td>
  <div class="input-field col s12">
    <%= f.text_field :description, class: "validate" %>
    <%= f.label :description %>
  </div>
</td>

3. 完整的表单代码整合 #

把所有部分整合起来，加上错误提示和提交按钮，完整代码如下：

<%= form_with(model: @product, local: true) do |f| %>
  <!-- 错误提示区域 -->
  <% if @product.errors.any? %>
    <div class="card-panel red lighten-2 white-text">
      <% @product.errors.full_messages.each do |msg| %>
        <p><%= msg %></p>
      <% end %>
    </div>
  <% end %>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Document</th>
        <th>Description</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <div class="input-field">
            <%= f.date_field :date, class: "validate" %>
            <%= f.label :date %>
          </div>
        </td>
        <td>
          <%= f.select :document, [['Option 1', 1], ['Option 2', 2]], 
                       { prompt: 'Choose your option' }, 
                       class: 'browser-default' %>
        </td>
        <td>
          <div class="input-field col s12">
            <%= f.text_field :description, class: "validate" %>
            <%= f.label :description %>
          </div>
        </td>
        <td>
          <%= f.submit 'Save Record', class: 'btn waves-effect waves-light' %>
        </td>
      </tr>
    </tbody>
  </table>
<% end %>

4. 控制器配置实现保存功能 #

要让表单能正常保存记录，需要在ProductsController里配置强参数和create动作：

# app/controllers/products_controller.rb
class ProductsController < ApplicationController
  def new
    @product = Product.new
  end

  def create
    @product = Product.new(product_params)
    if @product.save
      redirect_to products_path, notice: 'Product was successfully created.'
    else
      render :new
    end
  end

  private
    # 强参数，限制允许提交的字段
    def product_params
      params.require(:product).permit(:date, :document, :description)
    end
end

5. 最后配置路由 #

在config/routes.rb里添加资源路由，让Rails自动生成CRUD相关路由：

resources :products

这样你的表单就能完美结合Materialize样式和Rails的模型保存功能啦！

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