Question

我正在尝试通过angularJS根据其最小值和最大值来验证数字这是自定义指令，我首先尝试使用max，为输入数字验证提供angularJs，它使用静态数字而不是绑定数据。这就是我考虑自定义指令

的原因

.directive('ngMax', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
        scope.$watch(attr.ngMax, function(){
            if (ctrl.$isDirty) ctrl.$setViewValue(ctrl.$viewValue);
        });
        var maxValidator = function(value) {
          var max = scope.$eval(attr.ngMax) || Infinity;
          if (!isEmpty(value) && value > max) {
            ctrl.$setValidity('ngMax', false);
            return undefined;
          } else {
            ctrl.$setValidity('ngMax', true);
            return value;
          }
        };

        ctrl.$parsers.push(maxValidator);
        ctrl.$formatters.push(maxValidator);
    }
};
});

并在视图中：

<div class="modal-body" >
    title: {{book.title}}<br>
    price: {{book.price}}<br>
    quantity: {{book.nbr_exemplaires}}
    <form name= "myForm" ng-submit= "addToCart(book, quantity, <%= current_user.id %>)" novalidate >
      <input type="number" min="1"  ng-max="{{book.nbr_exemplaires}}" name= "quantite" ng-model="quantity" required  >
      <span style="color:red" ng-show="myForm.quantite.$error.required">
        <span ng-show="myForm.quantite.$error.required">quantity is required!</span>
      </span>


  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button  class="btn btn-primary" ng-disabled="myForm.$invalid ">Save changes</button>
  </div>
  </form>

我无法理解问题在哪里

Answer 1

为避免X / Y问题，当您尝试某些内容并且它无法正常工作时，请先尝试解决此问题。您提供了更广泛的背景，特别是针对您的问题，内置max提供了您需要的所有内容，这很好：

<input type="number" max="{{max}}" ng-model="foo">

您可以动态设置max，例如：

$scope.max = 10;

表单验证的自定义指令

1 个答案: