如何解决引导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 举报,一经查实,本站将立刻删除。