如何在 simple_form gem 中使用 Bootstrap 的输入组答案

【问题标题】：How to use Bootstrap's input group in simple_form gem如何在 simple_form gem 中使用 Bootstrap 的输入组
【发布时间】：2018-09-15 07:32:19
【问题描述】：

环境

Ruby 2.5.1
Rails 5.2.1
简单表格 4.0.1

当前行为

我遵循http://simple-form-bootstrap.plataformatec.com.br/examples/input_group中的示例

我从<%= simple_form_for app, wrapper: :input_group do |f| %> 开始并得到Couldn't find wrapper with name input_group，所以我取消注释

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'form-control-label'
    b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
      ba.optional :prepend
      ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
      ba.optional :append
    end
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

在simple_form_bootstrap.rb

并为SimpleForm::Inputs::StringInput' 类获取undefined methodappend'。

这个<%= f.input :subdomain, append: "example.com" %>有问题

我该如何使用它，这甚至支持 simple_form 吗？不知道他们为什么把那段代码注释掉。

【问题讨论】：

标签： ruby-on-rails simple-form simple-form-for

【解决方案1】：

创建config/initializers/simple_form_component.rb

module InputGroup
  def prepend(wrapper_options = nil)
    span_tag = content_tag(:span, options[:prepend], class: "input-group-text")
    template.content_tag(:div, span_tag, class: "input-group-prepend")
  end

  def append(wrapper_options = nil)
    span_tag = content_tag(:span, options[:append], class: "input-group-text")
    template.content_tag(:div, span_tag, class: "input-group-append")
  end
end

# Register the component in Simple Form.
SimpleForm.include_component(InputGroup)

Source

【讨论】：

谢谢，奇怪的是它不包含在库中并且必须手动添加。
在您的表单中使用它：<%= f.input :percentage, wrapper: :input_group, append: '%' %>

【解决方案2】：

如果有人想知道如何进行这项工作。补充PGill's 答案。在您创建文件config/initializers/simple_form_component.rb 后，内容如上所示。

您应该转到您的文件config/initializers/simple_form_bootstrap.rb，然后在您要使用的输入中添加如下内容：

b.wrapper :grid_wrapper, tag: 'div', class: 'input-group' do |ba|
  ba.optional :prepend
  ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: ''
  ba.optional :append
  # [...]
end

所以你的 input_wrapper 应该是这样的：

  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label
    b.wrapper :grid_wrapper, tag: 'div', class: 'input-group' do |ba|
      ba.optional :prepend
      ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: ''
      ba.optional :append
      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
      ba.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

然后你可以像这样在你的 erb 视图上使用它：

 <%= f.input :attribute_name, prepend: "$" %>

【讨论】：

本例中不需要。只关注问题和选择的答案。