ruby-on-rails - 使用 Rails 5 和 simple_form gem 聚焦表单中的第一个无效字段

Question

我使用 Rails 5 和 simple_form gem，并在安装时预先配置了 Bootstrap(如果它很重要)。

问题是:在表单上呈现第一个有错误的字段应该被关注。如果没有错误，让我们关注第一行。

此 gem 具有使用能力 autofocus: true在字段上，但将此属性放在表单 View 中的每个字段上会破坏“simple_form”的简单性。我找到的唯一解决方案是覆盖对 autofocus 字段属性的检查，并在字段有错误且未设置 autofocus 属性时强制设置它:

module SimpleForm
  module Helpers
    module Autofocus
      private

      def has_autofocus?
        options[:autofocus] == true || has_errors?
      end
    end
  end
end

对于表单没有错误的情况，我在第一个字段上显式设置自动对焦:

= simple_form_for object do |f|
  = f.input :to, autofocus: true
  = f.input :cc
  = f.input :subject
  = f.input :body, input_html: {rows: 10}

所以，问题是:有没有更好的方法来动态设置 autofocus 属性，而不覆盖这个 getter？ (请不要使用 JS，让我们使用纯 HTML 属性)我找不到使用表单构建器(例如 simple_form 在 config/initializers 生成的构建器)来实现这个场景的方法，但也许有一个复杂的构建器组合的解决方案？或者也许可以有一个更简单、更危险的覆盖？

Answer 1

由于这个问题没有合适的解决方案，我想出了一个小而笨拙的解决方案。
首先，您需要在 simple_form 初始值设定项中启用自定义组件的包含 config/initializers/simple_form.rb :

# Uncomment this and change the path if necessary to include your own
# components.
# See https://github.com/heartcombo/simple_form#custom-components to know
# more about custom components.
Dir[Rails.root.join('lib/components/**/*.rb')].each { |f| require f }

仍然在初始化程序中添加 autofocus_on_error成分:

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  ...
  config.wrappers :default, class: :input,
    ...
    # If a form has invalid fields, automatically set the focus on the first
    # field with an error
    b.use :autofocus_on_error
  end
end

现在在 lib/components/autofocus_on_error_component.rb 中创建实际组件:

module AutofocusOnErrorComponent
  def autofocus_on_error(wrapper_options = nil)
    if has_errors? && !inputs_with_autofocus_present?
      input_html_options[:autofocus] = true
    end

    nil
  end

  private

  def inputs_with_autofocus_present?
    @builder.template.output_buffer.include?('autofocus="autofocus"')
  end
end

SimpleForm.include_component(AutofocusOnErrorComponent)

最后重新启动您的网络服务器以反射(reflect)更改。