Question

Simple_form

<%= simple_form_for(@book, wrapper: :horizontal_form, wrapper_mappings: {
  }, html: { class: 'form-horizontal' }) do |f| %>
  <%= f.error_notification %>
  <div class="image-upload">
    <%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
  </div>
    <%= f.input :category_id, collection: @categories, prompt: 'Select a category' %>
    <%= f.input :author %>
    <%= f.input :description %>

  <div class="d-flex">
    <div class="ml-auto">
      <%= f.button :submit %>
      <%= f.button :cancel, to: books_path %>
    </div>
  </div>
<% end %>

这是我的simple_form表单。我希望f.input：book_cover显示为fa fa-cloud-download图标，而没有正常的下载按钮。

CSS。

.image-upload > input {
    display: none;
}

我已经使用了另一种表单（这只是常规form_for资源的一小段：

 <%= f.form_group :avatar, class: "row" do |f| %>
                  <%= f.label :avatar, class: "col-sm-4 col-form-label" %>
                  <div class="col-md-8">
                    <label class="image-upload form-control">
                      <i class="fa fa-cloud-download"></i>
                      <% if @user.avatar.present? %> <%= @user.avatar_file_name %>
                      <% end %>
                      <%= f.file_field :avatar %>
                      <%= f.error_messages %>
                    </label>
                  </div>
                <% end %>

似乎无法仅通过图标使用我的simple_form。

编辑：上传一张图片以显示我的问题所在和外观

picture should look like this

Answer 1

SimpleForm有一个input_field方法，您可以改用input来仅呈现实际的输入元素，而无需包装div和label。如果您想手动构建更复杂的结构，那会有所帮助。

<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
  <label class="image-upload form-control">
    <i class="fa fa-cloud-download"></i>
    <%= f.input_field :book_cover %>
    <%= f.error_messages %>
  </label>
</div>

简单表单的行为不同于form_for

1 个答案: