AngularJS Directive does error when input is empty

Question

I'm using this directive to limit my input to 5 caracters for percentage

   monApp.directive('awLimitLength', function () {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      attrs.$set("ngTrim", "false");
      var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs);
      scope.$watch(attrs.ngModel, function(newValue) { 
        if(ngModel.$viewValue.length>limitLength){
          ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
          ngModel.$render();
        }
      });
    }
  };
})

and using it like this :

<input name="name" type="text"  ng-model="nameVar" aw-limit-length="5"/>

BUt when the input is empty, firebug notice several errors like this :

  Error: ngModel.$viewValue is undefined


Error: ngModel.$viewValue is null

How could i avoid theses errors ? Thank you. I'd like the directive not to be started when an input is empty.

I've tried this : But it doesn't work :

  monApp.directive('awLimitLength', function () {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      attrs.$set("ngTrim", "false");
      var limitLength = parseInt(attrs.awLimitLength, 5);// console.log(attrs);
      if(attrs.ngModel!=null){
          scope.$watch(attrs.ngModel, function(newValue) { 
            if(ngModel.$viewValue.length>limitLength){
              ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
              ngModel.$render();
            }

          });
       }
    }
  };
})

Aravinder · Accepted Answer · 2017-01-19 11:33:26Z

1

Check ngModel.$viewValue exist before taking its length

scope.$watch(attrs.ngModel, function(newValue) { 
   if(ngModel.$viewValue && ngModel.$viewValue.length>limitLength){
      ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
      ngModel.$render();
    }
  });

answered Jan 19, 2017 at 11:33

Aravinder

5034 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user7370387 Over a year ago

Thank you but where do i write this please

Aravinder Over a year ago

if(ngModel.$viewValue && ngModel.$viewValue.length>limitLength){ replace your if condition in $watch with this line

Aravinder Over a year ago

Thank you :) If it is useful and working please mark it as correct answer

Ankur · Accepted Answer · 2017-01-19 13:25:08Z

0

You have used require: 'ngModel' in directive. so you can't use this directive without value in model variable.

Remove require: 'ngModel' & it will work.

edited Jan 19, 2017 at 13:25

answered Jan 19, 2017 at 13:10

Ankur

3,2095 gold badges30 silver badges57 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive does error when input is empty

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related