Question

我需要在呈现表单时向输入/ textarea / etc添加一个类，并且该字段有错误。

<input type="text" class="custom-error-class" />

是否有一种简单的方法可以附加到SimpleForm的CSS类列表中，但只有在字段的相应对象出错时？

Answer 1

我遇到了同样的问题。我的解决方案：

我创建了一个新类StringInput（它覆盖了原始类）并将实现复制出rdoc。我修补了该代码以检查字段本身是否有错误，如果是这样，我添加一个类无效。

因为我想使用包装器选项，所以我在初始化程序中添加了一个error_class属性。

完整代码：

应用程序/输入/ string_input.rb

class StringInput < SimpleForm::Inputs::StringInput
  def input(wrapper_options = nil)
    unless string?
      input_html_classes.unshift("string")
      input_html_options[:type] ||= input_type if html5?
    end

    input_html_classes << wrapper_options[:error_class] if has_errors?
    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

    @builder.text_field(attribute_name, merged_input_options)
  end
end

配置/初始化/ simple_form.rb

SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'waves-effect waves-light btn'

  config.wrappers tag: :div, class: :input, error_class: :"error-field" do |b|
    # Form extensions
    b.use :html5
    b.optional :pattern
    b.use :maxlength
    b.use :placeholder
    b.use :readonly

    # Form components
    b.use :label
    b.use :input, class: 'validate', error_class: 'invalid'
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
  end
end

这会在所有字符串输入上添加一个已定义的错误类。

Answer 2

现在使用simple_form 3.5.0更容易。

通过创建具有相同名称（docs）的新类来重新定义现有输入（即StringInput）。然后覆盖input_html_classes方法：

# app/inputs/string_input.rb
class StringInput < SimpleForm::Inputs::StringInput
  def input_html_classes
    has_errors? ? super.push('custom-error-class') : super
  end
end

Answer 3

simple_form将field_with_errors类添加到包装器元素。您可以使用它来使输入看起来不同：

.field_with_errors input { ... }

Answer 4

您可以使用error_html选项执行此操作：

<%= f.input :attr, error_html: { class: 'custom-error-class' } %>

Answer 5

谢谢@ vince-v，

使用您的信息我想出了这项工作，将错误类应用于所有类型的输入，包括标签，如果它们配置了error_class。

# lib/inputs/base.rb
module SimpleForm
  module Inputs
    class Base
      def merge_wrapper_options(options, wrapper_options)
        working_wrapper_options = wrapper_options.dup

        if working_wrapper_options
          if working_wrapper_options[:error_class] && has_errors?
            working_wrapper_options[:class] =
              [working_wrapper_options[:class]] + \
              [working_wrapper_options[:error_class]]
          end
          working_wrapper_options.delete(:error_class)

          working_wrapper_options.merge(options) do |key, oldval, newval|
            case key.to_s
            when "class"
              Array(oldval) + Array(newval)
            when "data", "aria"
              oldval.merge(newval)
            else
              newval
            end
          end
        else
          options.dup
        end
      end
    end
  end
end

# config/initializers/simple_form.rb
require 'inputs/base.rb

Answer 6

我的解决方案是使用以下内容创建初始化程序：

inputs = %w[
  CollectionSelectInput
  DateTimeInput
  FileInput
  GroupedCollectionSelectInput
  NumericInput
  PasswordInput
  RangeInput
  StringInput
  TextInput
]

inputs.each do |input_type|
  superclass = "SimpleForm::Inputs::#{input_type}".constantize

  new_class = Class.new(superclass) do
    def input_html_classes
      if has_errors?
        super.push('form-control-danger')
      else
        super
      end
    end
  end

  Object.const_set(input_type, new_class)
end

如何使用simple_form在错误输入中添加“错误”类？

6 个答案: