Explicit Control of valdr-messages location

[br0dieman9]

Would it be possible to modify valdr so that someone can place a new element (maybe a valdr-message-placeholder) on a form, so that form field messages (Ideally one placeholder per field, or a single placeholder that acts as a validation summary) are appended to that element instead the default location (the parent outside of a valdr-form-group or the valdr-form-group element). I have been trying to get the messages to show up using a bootstrap horizontal form, and the messages are showing up to the bottom and left of each field because they are not rendered in the bootstrap columns.

<div class="row" valdr-form-group>
    <label for="Quantity1" class="control-label col-xs-2">Gemstone Quantity</label>
    <div class="col-xs-10">                                    
        <input type="text" ng-model="vm.maintenance.Quantity1" class="form-control" id="Quantity1" name="Quantity1" placeholder="Gemstone Quantity">
    </div>
    <!-- MESSAGES END UP HERE-->
</div>

The code above works, but the message is appended outside the two columns. If I move the label outside the form group, it does not change color with the field but with the form instead.

I would like a feature that would allow for valdr-message-placeholder to be specified.

<div class="row" valdr-form-group>
    <label for="Quantity1" class="control-label col-xs-2">Gemstone Quantity</label>
    <div class="col-xs-10">                                    
        <input type="text" ng-model="vm.maintenance.Quantity1" class="form-control" id="Quantity1" name="Quantity1" placeholder="Gemstone Quantity">
        <div valdr-message-placeholder valdr-message="Quantity1"></div>
    </div>
</div>

Is this possible?

[marcelstoer]

Do you have a working example/demo somewhere (e.g. Plunker)? We need to look into this because the validation messages are supposed to show up next to the input element. Can you compare your implementation against the demo once more.

[br0dieman9]

Here is a working demo of the different things I've tried:
http://plnkr.co/edit/HBnX6hyNmeQY4iqyHznQ?p=preview

Try entering the letter a in each field.

[mmatczak]

This worked in my case:

<div class="row">
    <label for="Quantity1" class="control-label col-xs-2">Gemstone Quantity</label>
    <div class="col-xs-10" valdr-form-group>                                    
        <input type="text" ng-model="vm.maintenance.Quantity1" class="form-control" id="Quantity1" name="Quantity1" placeholder="Gemstone Quantity">
        <!-- MESSAGES WILL END UP HERE-->
    </div>
</div>

The only thing is that the class form-grouphas also been added to the div which broke the Bootstrap layout, but you can change the class' name as described here

As I am very new to valdr, I can't judge if this is a right way...

[mmatczak]

Now plnkr is up again and I see you have already come up with this idea...

[philippd]

This is already added as a feature request in #17

[br0dieman9]

Has the feature been implemented? Any idea where I can take a look for an example?

[marcelstoer]

No, check the comment just above yours.