Я пытаюсь сделать пользовательские оболочки для гибридной формы, как это:simple_form пользовательской обертки с помощью кнопки обычного радио
Идея заключается в том, что есть радио-кнопка, которые позволяют либо выбору даты , события или неопределенные. В настоящее время я создал эти вручную, и я пытаюсь создать обычную обертку Simple Form, чтобы избежать всех проблем с добавлением тонны кода в простой ввод. Второй вход ввода - тот, который я не могу получить совершенно правильно. Вот HTML для показанной формы:
<div class="form-group radio_buttons required work_order_end_task">
<label class="radio_buttons required col-sm-2 control-label"><i class="fa fa-check-circle text-danger"></i> End Date</label>
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon border-none">
<input class="radio_buttons required" type="radio" value="date" name="work_order[end_task]" id="work_order_end_task_date">
</span>
<input disabled="" type="text" value="" name="work_order[end_date]" id="work_order_end_date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true" data-date-today-btn="linked" data-date-orientation="auto right" data-date-today-highlight="true" class="date required form-control left-border-rounded">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon border-none">
<input class="radio_buttons required" type="radio" value="number" name="work_order[end_task]" id="work_order_end_task_number">
</span>
<input class="numeric integer form-control" type="string" value="" name="work_order[count]" id="work_order_count">
<span class="input-group-addon">
Occurrence(s)
</span>
</div>
<br>
<div class="input-group integer optional work_order_count">
<span class="input-group-addon border-none radio_buttons optional work_order_end_task">
<span class="radio">
<label for="work_order_end_task_none">
<input class="radio_buttons optional radio_buttons" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">
</label>
</span>
</span>
<input class="string optional form-control" type="text" value="" name="work_order[count]" id="work_order_count">
<span class="input-group-addon">Occurrence(s)</span>
</div>
<br>
<div class="form-group radio_buttons optional work_order_end_task"><div class="col-sm-10"><span class="radio"><label class="static-radio" for="work_order_end_task_none"><input class="radio_buttons optional" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">Indefinite</label></span></div></div>
</div>
</div>
Проблема заключается в добавлении дополнительных элементов и ярлыков. Вот мой код:
<%= f.input :count, wrapper: :input_group do %>
<%= f.input :end_task, as: :radio_buttons, wrapper: :radio_addon, collection: [['','none']], label: false %>
<%= f.input_field :count, as: :string, class: "form-control" %>
<span class="input-group-addon">Occurrence(s)</span>
<% end %>
и обертки:
config.wrappers :input_group, tag: 'div', class: 'input-group', error_class: 'has-error' do |b|
b.use :html5
b.use :input, class: 'form-control'
end
config.wrappers :radio_addon, tag: 'span', class: 'input-group-addon border-none' do |b|
b.use :html5
b.optional :readonly
b.use :input, class: 'radio_buttons'
end
Так как же я могу избавиться от <span class="radio">
и <label for="work_order_end_task_none">
на радио-кнопке, а затем все дополнительные классы (integer optional work_order_count
, например) является вставлены в обертки и входы?