指令接受大于0且小于100的数字

Question

我正在尝试创建一个角度指令，当文本字段的输入小于5且大于200时返回一个错误。

JS

app.directive('numbersOnly', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
       modelCtrl.$parsers.push(function (inputValue) {
           // this next if is necessary for when using ng-required on your input. 
           // In such cases, when a letter is typed first, this parser will be called
           // again, and the 2nd time, the value will be undefined
           if (inputValue == undefined) return '' 
           var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
           console.log("inputValue"+inputValue);
           if(parseInt(inputValue) > 200 || parseInt(inputValue) < 5){
             return '';
           }
           if (transformedInput!=inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
           }         

           return transformedInput;         
       });
     }
   };
});

的HTML

<div ng-controller="MyCtrl">
        <input type="text" ng-model="number" required="required" numbers-only="numbers-only" />
</div>

我创建的插件是这样（ http://plnkr.co/edit/QKifStiFmHBF8GhcH3Ds?p=preview ）

任何帮助，将不胜感激！

Answer 1

我给出了一个指令，该指令照顾您的模型值，使其始终包含5到200之间的int值。将setValidity设置为false时，将添加“ ng-invalid”类。 使用它，您可以使用css向用户显示错误。 如果在发生错误时希望使用正确的模型值更新输入，则可以在blur事件中执行此操作。

 app.directive('numbersOnly', function(){
       return {
         require: 'ngModel',
         link: function(scope, element, attrs, modelCtrl) {
           modelCtrl.$parsers.push(function (inputValue) {


           if(parseInt(inputValue) <= 200 && parseInt(inputValue) >= 5){
             modelCtrl.$setValidity('numbersOnly', true);
             return inputValue;
           } else {
             modelCtrl.$setValidity('numbersOnly', false);
             return modelCtrl.$modelValue;
           }

       });
     }
   };
});

Answer 2

angular已经为此提供了完善的指令。 您只需要一个表单，并在输入标签中使用Min Max

<form name="ue.form">
   <input type="number"  ng-model="ue.num" name="num" min="5" max="200" >
</form>
<p ng-if="ue.form.$error">
      number must be less than 200 and greater than 5
</p>
or you can handle each error separately:
<p ng-if="ue.form.num.$error.min">
      number must be  greater than 5
</p>
<p ng-if="ue.form.num.$error.max">
      number must be less than 200
</p>

如果数字不在5-200范围内，则表单验证器将引发错误。 最小和最大仅适用于输入类型=“ number”。

https://plnkr.co/edit/?p=preview

Answer 3

这是我的建议：

1. 使用ng-model-options =“ {updateOn：'blur'}”，以便仅在模糊时更新模型。

2. 在指令中尝试以下代码：

   app.directive（'numbersOnly'，function（）{return {require：'ngModel'，strict：'A'，link：function（scope，element，attrs，ngModel）{

     element.on('blur', function() { if (ngModel.$viewValue < 5 || ngModel.$viewValue > 200) { ngModel.$setViewValue(''); element.val(''); } }); } 

   }; }）;

Answer 4

您可以将ng-messages用于此类验证目的

我们始终可以根据需要定制ng-messages。

您可以为min和max创建两个指令。 在您的情况下，最小值为5，最大值为200，我们不需要在指令中对值进行硬编码。

您无需担心在指令中添加错误消息。 ng-messages将为您做到。 您只需要将消息放入ng-messages div中即可。

指示

 module.directive("min", function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, element, attributes, ngModel) {
                ngModel.$validators.min = function (modelValue) {
                    if (!isNaN(modelValue) && modelValue !== "" && attributes.min !== "")
                        return parseFloat(modelValue) >= attributes.min;
                    else
                        return true;
                }
            }
        };
    });

  module.directive("max", function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, element, attributes, ngModel) {
                ngModel.$validators.max = function (modelValue) {
                    if (!isNaN(modelValue) && modelValue !== "" && attributes.max !== "")
                        return parseFloat(modelValue) <= attributes.max;
                    else
                        return true;
                }
            }
        };
    });

用法

<form name="myform">
 <input type="text" name="minmax" ng-model="number" required="required" min="5" max="200"/>
 <div data-ng-messages="myform.minmax.$error" class="error-messages">
  <div data-ng-message="min">YOu cant enter below 5</div>
   <div data-ng-message="max">You cant enter above 200</div>
  </div>
</form>

这是我的例子