Question

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

如果我使用原生输入类型

，它可以正常工作

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

但是当我使用自定义指令时，

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

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>

请指导

苏尼

Answer 1

您的代码存在一些缺陷，但我认为这是因为您使示例不正确，主要问题可能在这里：

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

Answer 2

我不太确定你的例子有什么问题，它只是不起作用......无论如何，这是一个可以用来实现你的功能的解决方法。

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>

控制器：

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

AngularJs Custom Directive未通过文本框验证

2 个答案: