Question

我正在尝试创建一个输入元素：

持有一个数字（字符串或实际数字无关紧要）。
除了数字和点（。）之外，您将无法输入任何其他内容。
您可以输入两位小数。
如果没有输入小数，则在离开输入元素时（on-blur），应将两位小数（即.00）添加到数字中。
我正在使用AngularJS（1.2）并在包含表单上观看$ valid和$ invalid。
当值为带有两位小数且值大于0的数字时，输入有效。

我试过用：

<input ng-model="price" type="number" ng-blur="addDecimals()"/>

$scope.addDecimals = function(){
  $scope.price = $scope.price.toFixed(2);
}

但是我不能将零添加为小数（.00）。由于toFixed（）返回一个字符串，因此输入中不允许该值，它变为空。

我也尝试过使用

<input type="text" ng-model="price" ng-blur="addDecimals()" ng-change="changed()" /> 

$scope.changed = function(){
    // removes all charachters but numbers and one dot (.);
    // examples: 
    //  if value is '1a.t9' it will be changed to '1.9'
    //  if value is 'qwe' it will be changed to ''
    //  if value is 4 it will not be changed.
    $scope.price = removeAllCharsButNumbersAndDot($scope.price);
}

$scope.addDecimals = function(){
   if(parseFloat($scope.price) > 0) 
     $scope.price = $scope.price.toFixed(2);
   else
     $scope.price = "";
}

使用此解决方案[form]。如果输入值“0”，则$ valid将设置为true。 [form]。$ valid只有在用户离开输入元素（on-blur）时才会设置为false。

我试过使用ng-pattern =“/ ^ \ s *（？=。 [1-9]）\ d （？：。\ d {1,2}）？ \ s * $ /“，然后ng-change不会触发。

Answer 1

您可以使用https://github.com/angular-ui/ui-validate。 Ui-validate非常适合这一点。例如：

<input type="number" ng-model="priceModel" ui-validate=" 'checkPriceModel($value)' ">

//Controller:

$scope.checkPriceModel = function(value){
  return value <= 0;
}

Answer 2

您不需要为此更改ng-change。你可以像这样重写你的HTML。

<form name="theForm" id="theForm">
  <input id="priceId" type="number" 
    name="priceName" ng-model="priceModel" required min="0" />
  <span class="error" ng-show="theForm.priceName.$error.number">
       Not valid number!
  </span>
</form>

您可以在此处详细了解：https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

Answer 3

<form name="theForm" id="theForm">
<input ng-change="changed()" id="priceId" type="number" min="1" name="priceName" ng-model="priceModel" required />
</form>

是最简单的（没有额外的模块）

Answer 4

如果我做对了，你可以试试

<form name="appTest">
<div
     ng-class="{ 'has-error': appTest.app.$touched && appTest.app.$invalid }">
    <input type="text" ng-model="vm.text" name="app" ng-pattern={define your pattern}>
    </select>
</div>

如果无效，则有错误＆＃39;课程将被应用。

使用AngularJS的输入元素只允许带小数的数字

4 个答案: