Form horizontal does not work properly

[ONbik-srebollo]

If we have a form horizontal as Bootstrap 3 says:

       <div class="form-group">
          <label class="control-label col-md-3">Título</label>
          <div class="col-md-9">
            <input type="text" formControlName="name" class="form-control">
          </div>
        </div>

The error is placed outside col-md-9 div. It must be inside to view message correctly.

[third774]

Yeah - definitely an oversight on my part when putting this together. Will need to look into that. Thinking of creating a directive using .form-control as a selector and rendering the error messages as siblings following that element. Does that sound appropriate?

[ONbik-srebollo]

Sounds great for most cases, but... checkboxes and radios don't have form-control class. I think the better strategy would be to search the input/select/textarea inside form-group, level up to his parent and append to it.

If it's a usual form, it would be set under input. If it's a horizontal form with usual input, it would be set under the input inside div with col-* class.

If it's an input-group (input with button to the right, for example) we have a problem, because the help-block should be set under div with col-* class, not under div with input-group class.

It's hard to say a unique rule for that. I guess that it needs an If to control all possibilities. I'm not an expert on angular and I don't know if this is easy to achieve.

[third774]

Thanks for the input. I'm kicking around a few ideas. I hope to have something put together within the next week or so.

[third774]

Fixed in 2.1.0. See usage here: https://github.com/third774/ng-bootstrap-form-validation#custom-error-message-placement

[kingcody]

@ONbik-srebollo 2.1.0 was just released with the addition of custom message placement with the use of a message outlet component: <bfv-messages>. You can see an example here.

(warning: there are still some rough edges with ng 5 builds)

[ONbik-srebollo]

Thanks!!!!

I'll try ASAP.