问题

使用 simple_form 的 input_field

在同一个表单中，每行输入的元素个数，有的是 1，有的是 2，或者 3，但要求某些元素的 label 对齐

我的使用方法是

div.row
  label.col-xs-2.control-label = Profile.human_attribute_name("realname")
  div.col-xs-2
    = f.input_field :realname, class: "form-control"

  label.col-xs-offset-2.col-xs-1.control-label 照片
  div.col-xs-3
    - if @profile.avatar?
      = image_tag(@profile.avatar_url(:normal))
    - else
      = image_tag "image-placeholder.png"
    = f.file_field :avatar, class: "form-control"

这种类似的写法，需要保证每行的所有元素都是在 div.row 中，然后设置相应的 col-xs-offset，或者 col-xs-2 这种来保证偏移是相同的，也就是对齐。

但是这样写，就没法用 simple_form 的出错信息显示，我想到的出错显示的方法就是每个 input 后面，读取 f.object.errors 里面是否有该 input 的 name，有就显示出来，类似

7     div.form-group.string.optional class=('has-error' if (@player.errors.include?(:work_start_at)))
  8       label.string.optional.control-label for="player[work_start_at]" 工作开始时间
  9       div.input-group.date.timepicker
 10         input type='text' class="form-control" name="player[work_start_at]" value="#{@screen.player.work_start_at}"
 11           span.input-group-addon
 12             span.glyphicon.glyphicon-time
 13       - if @player.errors.include?(:work_start_at)
 14         span class="help-block" #{@player.errors.get(:work_start_at)[0]}

但是这样子写，实在是太累了，一个 input，竟然要写这么多代码。而把所有的表单 input error 信息全部显示在 form 表单之上，全部打印出来，也是不可接受的，错误信息，还是应该紧跟输入框。

使用 simple_form 的 input

使用 f.input, 这种写法，simple_form 会帮我们处理好出错信息的显示问题，但是会带来多行输入时的对齐问题

= f.input :mobile,  :wrapper => "input_wrap"

config.wrappers :input_wrap, :tag => 'div', :class => 'row form-group', :error_class => 'has-error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label, :wrap_with => {:class => 'col-xs-2 control-label'}
  b.wrapper :tag => 'div', :class => 'col-xs-5' do |ba|
    ba.use :input, :class => 'form-control'
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-block' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

这种写法，也能处理好单行时，label 占据 col-xs-2, input 占据 col-xs-5 的问题。

但是当一行需要包含多个元素的输入，如 start_day 和 end_day 时，使用 simple_form 的 f.input, 每个都会生成一个 div 的 wrapper, 两个元素的无法作为兄弟节点，同时存在一个 div.row 中，这样就不能好的为每个 Input 设置 offset 和大小，也就没法和其它行进行 label 的对齐。

这个问题大家应该碰到过吧？

假设将每行的 input 当作是一个 ember compoent, 不同的 compoent 之间的内部对齐问题应该怎么解决呢，@nightire，layout 虽然也可以作为一个 compoent，但解决不了这种问题吧。我想，这个问题，不同的 input 元素，需要进行对齐，本身应该整体作为一个 compoent 才好，然后集中去解决输入错误验证信息吧。