首页 文章

AngularJs Custom Directive未通过文本框验证

提问于
浏览 次
0

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

如果我使用本机输入类型，它工作正常，

<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>

请指导

苏尼尔

javascript angularjs angularjs-directive

2 回答

  • 0

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

    inputName: '=' should be replaced with inputName: '@' to hold the string value of the input name
    回复于
  • 0

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

    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;
                  }
                }
              });
          }
      };
  });
    回复于

相关问题