Question

我正在尝试创建一个角度指令，当textfield的输入小于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>

我创建的plunker就是这个（http://plnkr.co/edit/QKifStiFmHBF8GhcH3Ds?p=preview）

任何帮助将不胜感激！

Answer 1

我已经给出了一个指令，它会处理你的模型值，使其总是包含5到200之间的int值.A＆＃39; ng-invalid＆＃39;当setValidity为false时，将添加class。使用它可以使用css向用户显示错误。如果您希望在出现错误时使用正确的模型值更新输入，可以在模糊事件中执行此操作。

 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范围内，则表单validotor会抛出错误。最小值和最大值仅适用于输入类型=“数字”。

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

Answer 3

以下是我的建议：

使用ng-model-options =＆＃34; {updateOn：＆＃39;模糊＆＃39; }＆＃34;这样模型只能在模糊时更新。
在指令中尝试此代码：

app.directive（＆＃39; numbersOnly＆＃39;，function（）{ 返回{ 要求：＆＃39; ngModel＆＃39;，限制：＆＃39; A＆＃39;， link：function（scope，element，attrs，ngModel）{
```
pattern.test("1");
false
pattern.test("11");
false
pattern.test("111");
true
pattern.test("11.11");
true
pattern.test("-11.11");
true
pattern.test("+11.11");
true
pattern.test(".11");
false
pattern.test("+12414.11");
true
```
}; }）;

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>

Here is my pluker example

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

4 个答案: