ruby-on-rails 如何使用simple_form在error的输入中添加“error”类?

pqwbnv8z  于 2023-05-19  发布在  Ruby
关注(0)|答案(7)|浏览(144)

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

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

有没有一种简单的方法来追加到SimpleForm的CSS类列表中,但仅当字段的对应对象是错误时?

c86crjj0

c86crjj01#

我也有同样的问题。我对此的解决方案:
我创建了一个新的类StringInput(它覆盖了原来的类),并从rdoc中复制了实现。我打补丁的代码,以检查是否有错误的领域本身,如果是这样,我添加一个类无效。
因为我想使用 Package 器选项,所以我在初始化器中添加了一个error_class属性。
完整代码:
app/inputs/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

config/initializers/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

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

vjrehmav

vjrehmav2#

simple_form将field_with_errors类添加到 Package 器元素。您可以使用此命令使输入看起来不同:

.field_with_errors input { ... }
zlhcx6iw

zlhcx6iw3#

现在使用simple_form 3.5.0更容易了。
重新定义现有输入(即StringInput),方法是创建一个同名的新类(docs)。然后覆盖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
qlzsbp2j

qlzsbp2j4#

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

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

bnlyeluc5#

谢谢@vince-v
使用您的信息,我想出了这个正在进行的工作,将error类应用于所有类型的输入,包括标签,如果它们配置了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
j2datikz

j2datikz6#

我的解决方案是创建一个初始化器,如下所示:

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
wpx232ag

wpx232ag7#

添加一个新的答案,因为这些天事情似乎更简单!
在当前版本的simple_form(5.2.0)中,我已经在b.use :labelb.use :label_input上使用了error_class(取决于你是否需要标签):

b.use :label_input, error_class: 'custom-error-class'

相关问题