AngularJs Custom Directive fails the text box validation

Question

I have written a custom directive to ensure that a text box can take only integer values. But After using the directive, my $error.required flag always stay false irrespective of whether I have a value in the text field or not.

It works fine if I use the native input type,

  <input name="name" ng-model="testvalue.number" required />

but when I use the custom directive,

<number-only-input input-value="testvalue.number" input-name="name"/>

shippingForm.name.$error.required is always false and it doesn't show the error "Please enter a value" even if the field is empty This is the code

    <body ng-controller="ExampleController">
        <form name="shippingForm" novalidate>

                <!--<input name="name" ng-model="testvalue.number" required />-->
                <number-only-input input-value="testvalue.number" input-name="name"/>         
                <span class="error" ng-show="shippingForm.name.$error.required">
                    Please enter a value
                </span> 
        </form>
    </body>

<script>
          angular.module('TextboxExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
               $scope.testvalue =  {number: 1, validity: true}
            }])
            .directive('numberOnlyInput', function () {
        return {
            restrict: 'EA',
            template: '<input name="{{inputName}}" ng-model="inputValue" required />',
            scope: {
                inputValue: '=',
                inputName: '='
            },
            link: function (scope) {

                scope.$watch('inputValue', function(newValue,oldValue) {
                    if (newValue == undefined || newValue == null || newValue == "") {

                    return;
                    }
                    if (isNaN(newValue))
                    {
                        scope.inputValue = oldValue;
                        return;
                    }
                });
            }
        };
    });         
 </script>

Please guide

Sunil

guramidev · Accepted Answer · 2015-10-03 11:50:02Z

0

You code has some flaws, but i think this is because you made the example incorrect, the main issue may be here:

inputName: '=' should be replaced with inputName: '@' to hold the string value of the input name

answered Oct 3, 2015 at 11:50

guramidev

2,2381 gold badge17 silver badges19 bronze badges

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

Comments

ZenDD · Accepted Answer · 2015-10-04 09:28:49Z

0

I'm not quite sure what's wrong with your example, it just doesn't work... Anyway here's a workaround which you can use to implement your functionality.

HTML:

<div ng-app="TextboxExample" ng-controller="ExampleController">
  <form name="shippingForm" novalidate>
    <input number-only-input type="text" name="name" ng-model="testvalue.number" required />
    <!-- <number-only-input input-value="testvalue.number" input-name="name"/>   --> 
    <span class="error" ng-show="shippingForm.name.$error.required">
        Please enter a value
    </span> 
  </form>
</div>

Controller:

angular.module('TextboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
       $scope.testvalue = {number: 1, validity: true};
    }])
    .directive('numberOnlyInput', function () {
      return {
          link: function (scope, element, attrs) {
              var watchMe = attrs["ngModel"];
              scope.$watch(watchMe, function(newValue,oldValue) {
                if(newValue == undefined || newValue == null || newValue == ""){
                  return;
                } else if (isNaN(newValue)) {
                  var myVal = watchMe.split(".");
                  switch (myVal.length) {
                    case 1:
                      scope[myVal[0]] = oldValue;
                      break;
                    case 2:
                      scope[myVal[0]][myVal[1]] = oldValue;
                  }
                }
              });
          }
      };
  });

edited Oct 4, 2015 at 9:28

answered Oct 3, 2015 at 15:32

ZenDD

9561 gold badge8 silver badges17 bronze badges

2 Comments

S_R Over a year ago

thanks, this works. But how do I make it generic so that I can reuse this for more than one textboxes. Here the value testvalue.number has been hardcoded which means I cannot reuse it for other textbox instances. Is there a way to parameterize this argument? so that I can pass anything instead of testvalue.number? Thanks Sunil

ZenDD Over a year ago

Ok, check the example again. Now it is generic. Though if you're going to work with deeply nested scope properties (ng-model="$scope.property.another.yetAnother"), you should add additional case statements. Well anyway, hope this is sort of what you were looking for :)

Collectives™ on Stack Overflow

AngularJs Custom Directive fails the text box validation

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related