AngularJs Custom Directive未通过文本框验证

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.

我编写了一个自定义指令,以确保文本框只能采用整数值。但在使用该指令后,无论我是否在文本字段中有值,我的$ error.required标志始终保持为false。

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

shippingForm.name。$ error.required始终为false并且即使字段为空也不显示错误“请输入值”这是代码

    <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

2 个解决方案

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

#1