i have a custom input component in angular. i want to set maxlength attribute on it. here is the directive

Question

I have a custom input component in angular. I want to set the maxlength attribute on this component but don't know how to. the usual ng-maxlength and maxlength(HTML) don't work.

here is my directive-

numericApp.directive('decimalInput',['$timeout', '$filter','readonlysvc', '$compile',function($timeout, $filter,readonlysvc,$compile) {
var withoutDecimal='<input type="number" ng-model="ngModel" class="form-control" ng-show="showNumber" ng-blur="numberBlurred()" only-number/><input value="{{formatted}}" ng-focus="textFocused()" class="form-control" ng-click="textFocused()" ng-hide="showNumber" only-number/>';
var withDecimal='<input type="number" ng-model="ngModel" class="form-control" ng-show="showNumber" ng-blur="numberBlurred()" /><input value="{{formatted}}" ng-focus="textFocused()" class="form-control" ng-click="textFocused()" ng-hide="showNumber" />';
var getTemplate = function(decimalLength){
    var template = '';
    decimalLength = decimalLength||0;
    if(decimalLength==0) {
        template = withoutDecimal;
    } else {
        template = withDecimal;
    }
    return template;
};
return {
    restrict: 'E',
    template: '<input type="number" ng-model="ngModel" class="form-control" ng-show="showNumber" ng-blur="numberBlurred()" /><input value="{{formatted}}" class="form-control" ng-click="textFocused()" ng-hide="showNumber"/>',
    scope:{
        ngModel : "="
    },
    link: function($scope, $elm, $attrs) {
        var result=parseFloat($attrs.value||0);
        $scope.ngModel=result;
        $elm.html(getTemplate($attrs.decimals));
        var liveRegion= $('.number-input-accessible');
        if (liveRegion.length == 0) {
            liveRegion = $("<span>", {
                role: "status",
                "aria-live": "assertive",
                "aria-atomic":"true"
            })
                .addClass("number-input-accessible screen-reader")
                .appendTo(document.body);
        }
        $elm.find('input[type=number]').focus(function() {
            var ariaText=$.i18n.prop("numeric.decimal.value");
            var editUnavailableText=$.i18n.prop("numeric.edit.unavailable");
            if ($elm.find('input').attr('readonly')) {
                ariaText = ariaText+" "+editUnavailableText;
            }
            liveRegion.text(ariaText);
        });
        $compile($elm.contents())($scope);
        $scope.showNumber = false;
        $scope.numberBlurred = function(){
            $scope.showNumber = false;
        };

        $scope.textBlurred = function(){
            $scope.showNumber = true;
        };

        $scope.textFocused = function(){
            $scope.showNumber = true;
            $timeout(function(){
                $elm.find('input[type=number]').focus();
            }, 50)
        };

        $scope.$watch('$scope.showNumber',function(){
            if($scope.showNumber){
                 $timeout(function(){
                    $elm.find('input[type=number]').focus();
                    console.log('focused');
                }, 50)
            }
        },true);

        $scope.$watch(function() { return $elm.attr('ng-readonly') },function(value){
            if(value !== undefined){
                readonlysvc.toggle($elm,$elm.attr('ng-readonly'));
            }
        });

        $scope.$watch('ngModel', function(){
            var formatted;
            formatted = $filter("number")($scope.ngModel, $attrs.decimals);
            $scope.formatted = formatted;

        }, true);
    }
};
}
]
);

the HTML code is:

<decimal-input ng-model="requisition.unitPrice" decimals="4"               id="unitprice" on-change="callCalculateTax()"></decimal-input>

please help out.

score 0 · Answer 1 · edited May 23 '17 at 12:06

Make a separate attribute directive

You can make a directive either 'E' or 'A', by making it 'A' it can be an attribute with certain properties. by Building an attribute Directive you can have separate code to limit your input. here is an example taken from tymeJV

app.directive("limitTo", [function() {
  return {
      restrict: "A",
      link: function(scope, elem, attrs) {
          var limit = parseInt(attrs.limitTo);
          angular.element(elem).on("keydown", function() {
              if (this.value.length == limit) return false;
          });
      }
  }
}]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">

Option 2 ng-min/maxlength

The second option is to use the attributes built into angular. You can use the ng-minlength="SomeNumber"or the ng-maxlength="Some Number" as an attribute on your directive.

Hope this helps. Good luck.

i have a custom input component in angular. i want to set maxlength attribute on it. here is the directive

1 Answers1

Make a separate attribute directive

Option 2 ng-min/maxlength