引导4验证simple_form tempus的自定义输入dominus dattimepicker

问题描述

我正在将simple_form与simple_form_bootstrap初始化程序和包装器一起使用。 我正在尝试为tempusdominus datetimepicker控件创建一个自定义输入。

作为基础，我有https://github.com/heartcombo/simple_form/wiki/Custom-inputs-examples的详细信息，其中有bootstrap3上的日期选择器控件示例，还有https://github.com/Bialogs/bootstrap4-datetime-picker-rails/issues/4上的tempus dominus（无bootstrap）示例。

一切正常，但我一直在努力获取所有验证重点，特别是我不确定如何使输入控件的错误验证正常工作，下面显示了错误消息很好。

我在tempus_dominus_base.rb中有一个自定义输入

class TempusDominusInput < SimpleForm::Inputs::Base
  def input(wrapper_options)
    template.content_tag(:div,class: 'input-group date',data: { target_input: 'nearest' },id: "#{object_name}_#{attribute_name}") do
      template.concat @builder.text_field(attribute_name,input_html_options)
      template.concat div_button
    end
  end

  def input_html_options
    super.merge({class: 'form-control datetimepicker-input'})
  end

  def div_button
    template.content_tag(:div,class: 'input-group-append',data: {target: "##{object_name}_#{attribute_name}",toggle: 'datetimepicker'} ) do
      template.concat span_table
    end
  end

  def span_table
    template.content_tag(:div,class: 'input-group-text') do
      template.concat icon_table
    end
  end

  def icon_remove
    "<i class='glyphicon glyphicon-remove'></i>".html_safe
  end

  def icon_table
    "<i class='fas fa-calendar-alt'></i>".html_safe
  end
end

我已经像这样在simple_form_bootstrap.rb中复制了一个自定义包装器

  config.wrappers :vertical_tempus_dominus,tag: 'div',class: 'form-group',error_class: 'form-group-invalid' 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 :input_group_tag,class: 'input-group' do |ba|
      ba.optional :prepend
      ba.use :input,class: 'form-control',error_class: 'is-invalid'
      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

并将其添加到配置包装器映射

  config.wrapper_mappings = {
    boolean: :vertical_boolean,check_Boxes: :vertical_collection,date: :vertical_multi_select,datetime: :vertical_multi_select,file: :vertical_file,radio_buttons: :vertical_collection,range: :vertical_range,time: :vertical_multi_select,tempus_dominus: :vertical_tempus_dominus
  }

在此示例中，您可以看到一个正常的datepicker控件，其顶部具有有效的工作验证，而下面的tempus占主导地位的部分具有有效的工作亮点。

我在这里想念什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）