AngularJs Custom Directive fails the text box validation

问题

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

回答1:

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

回答2:

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;
                  }
                }
              });
          }
      };
  });

来源：https://stackoverflow.com/questions/32921951/angularjs-custom-directive-fails-the-text-box-validation

标签

javascript

angularjs

angularjs-directive