角驗證輸入類型=「數字」

我已標記這樣的：角驗證輸入類型=「數字」

<form name="myForm" ng-controller="myCtrl" novalidate> 
    <input ng-model="theValue" type="range" min="0" max="100" required> 
    <input ng-model="theValue" type="number" required></input> 
    <span ng-show="theValue.$error.number">Hey! No letters, buddy!</span> 
</form>

我希望的跨度，以顯示當用戶不小心類型在第二輸入的信。很簡單，對吧？作爲（可能）相關的問題，當用戶移動第一個滑塊輸入時，第二個輸入中的值將消失。爲什麼？如果我從標記中刪除type-number，則不會發生這種情況。

要清楚：我希望用戶在輸入時立即看到工具提示錯誤，而無需任何「提交」操作。（我不希望有其實在所有使用form元素，但所有相關的演示似乎需要它。）

http://jsfiddle.net/7FfWT/

任何解決方法是最歡迎的。如果可能，請張貼工作小提琴。

來源

2013-06-30 Ben

似乎有一個奇怪的問題與type="number"與其他inputs很好玩。

在這個谷歌組帖子中的帖子應該讓你在正確的軌道上。在特別，最後發表的文章有：https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

的的jsfiddle鏈接是：http://jsfiddle.net/ABE8U/

作爲變通，他做了一個指令：

.directive('toNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      ctrl.$parsers.push(function (value) { 
       return parseFloat(value || ''); 
      }); 
     } 
    }; 
});

感謝Schmuli拉斯金

來源

2013-07-01 02:44:24 jzm

太棒了。很高興它不只是我然後:)謝謝！（和Schmuli ...）最後得到這個去：http://jsfiddle.net/HQUgW/13/ – Ben

看到這裏的例子https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D – KrIsHnA

否則'2dd'將返回true。你應該檢查'！isNaN（parseFloat（obj））&& isFinite（obj）'http://jsfiddle.net/ABE8U/148/ –

JZM的答案爲我工作，直到我需要'0'作爲輸入。我調整了jzm的代碼：

.directive('toNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      ctrl.$parsers.push(function (value) { 
       if (value === 0) 
        return 0; 

       return parseFloat(value || ''); 
      }); 
     } 
    }; 
});

請注意添加了if (value === 0)塊。

有人比我更瞭解JavaScript邏輯比較，可能會創建更優雅的代碼。

來源

2013-08-03 18:14:56 Jeremy

我已更新指令以使用ng-repeat過濾器。注意'$'，這是一個通配符。這個指令應該處理0就好了。故障轉移到通配符上

.directive('toNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ctrl) { 
      ctrl.$parsers.push(function(value) { 
       return value===0 ? 0 : (parseFloat(value) || '$'); 
      }); 
    }; 
})

來源

2014-05-16 00:40:06 FesterCluck

您也可以使用NG-圖案驗證：

<input type="number" ng-model="theValue" name="theValue" step="1" min="0" max="10" ng-pattern="integerval" required> 
<span ng-show="form.theValue.$invalid">Hey! No letters, buddy!</span> 

$scope.integerval = /^\d*$/;

來源

2014-11-22 21:32:20 zenio

這是最好的解決方案，如果你不想使用html5輸入[數字] – sidonaldson

JZM，回答是真是奇妙招救了我的時間。

我只是更進一步，用實際做的替換parseFloat(value)。

directive('number', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ngModel) { 

      ngModel.$parsers.push(function (value) { 
       if (value==null) 
        return NaN; 
      }); 
     } 
    }; 
});

來源

2015-09-17 17:45:12 immirza

角驗證輸入類型=「數字」

回答

相關問題