Bootstrap Decorator (has error) - ghiscoding/angular-validation GitHub Wiki

Thanks to @nettino for providing an easy way to have Bootstrap Decorator for has-error (discussion source #88). See below for his solution

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 form field must be declared at all times.

⚠️ **GitHub.com Fallback** ⚠️