Bootstrap integration

[karolwebsky]

Is there a way I could toggle Bootstrap class 'has-error', 'has-feedback' (or 'has-success') for parent element (ie. div) of the invalid field with agular-validation library?

[ghiscoding]

I am not dealing at all with CSS class, Angular does it by itself when the field is valid/invalid it will add .ng-valid or .ng-invalid. You can see the CSS that I deal with in the sample with style.css

You could possibly use the Validation-Callback to do the wrapping yourself, depending if it's valid or invalid. So take a look at Wiki - Validation-Callback.

I basically won't do anything with the CSS from the library, you have to find a way to do it yourself... at least Validation-Callback seems like a good way to do it... Good luck.

[karolwebsky]

I've quickly written simple decorator - in case someone needs that at any point:

(function() {   

    var bootstrapValidationDecorator = function() {
        return {
            scope: {
                bootstrapValidationDecorator:'@'
            },
            restrict: 'A',
            require:  '^form',
            link: function (scope, el, attrs, formCtrl) {
                scope.form = formCtrl; // no template so no need for that for now
                console.log(scope.form);

                if(scope.bootstrapValidationDecorator!=undefined && scope.bootstrapValidationDecorator!="") {
                    scope.fieldName = scope.bootstrapValidationDecorator;
                } else {                    
                    scope.fieldName = angular.element( el[0].querySelector("[name]") ).attr('name');
                }

                scope.$watch(
                    function(scope) {
                        return (scope.form[scope.fieldName].$touched || scope.form.$submitted) && scope.form[scope.fieldName].$invalid;
                    },
                    function( newVal, oldVal ) {
                        if(newVal != oldVal){
                            el.toggleClass('has-error', newVal);
                        }
                    }
                );
            }
        }
    }
    angular.module('app').directive('bootstrapValidationDecorator', bootstrapValidationDecorator);

}());

Usage:

<div class="form-group" bootstrap-validation-decorator>
    <label class="control-label">Your label</label>
    <input class="form-control" type="text" name="lastname" ng-model="user.lastname" validation="alpha_dash|min_len:2|max_len:50|required"  />
</div>

You can also provide the field name (ie. in case it's dynamic):

<div class="form-group" bootstrap-validation-decorator="lastname">
<div class="form-group" bootstrap-validation-decorator="{{fieldName}}">

Name of the field must be declared at all times.

[ghiscoding]

Thanks for the demo, I added it in the Wiki list so that it might help others :)
See the Wiki - Bootstrap Decorator (has-error)

If you like my Angular-Validation package, you could also click Star on top, that's all I ask :)

[ghiscoding]

By the way, you said Name of the field must be declared at all times. but if I look at the first code sample under Usage, you're actually missing the name of the field, is that a mistake?

<div class="form-group" bootstrap-validation-decorator>
    <label class="control-label">Your label</label>
    <input class="form-control" type="text" name="lastname" ng-model="user.lastname" validation="alpha_dash|min_len:2|max_len:50|required"  />
</div>

[karolwebsky]

Hi, thanks for adding it to Wiki!
Name is declared on input: name="lastname" - maybe I should have been more specific: "Name of the form field must be declared at all times."

[ghiscoding]

Ok, I updated the Wiki. Thanks for the feedback.. enjoy the package ;)