Question

我有一个浮动属性的模型

public float Amount {get;组; }

和一个显示anf的文本框编辑金额值。

仅接受号码

我的文本框应该允许字符，输入时应该显示错误信息

这里我想添加一个验证来限制只有数字和小数点。当我在文本框中输入字符时，我的验证无效。

当我检查时，我可以看到在文本框{{model.amount}}上输入字符时，会变为空白。我认为这是问题所在。有人可以建议在这种情况下做什么

Answer 1

您可以添加ng-patter或使用step attr添加html5输入类型编号。

HTML5

<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" *step="0.01"* />

NG-图案

<form name="myForm">
  <input type="text" name="test1"  data-ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" data-ng-model="model.amount" /> 
  <span data-ng-show="myForm.test1.$error.pattern">invalid</span> 
  <span>{{model.amount}}</span><br/>
</form>

具有最小值和最大值的Ng模式

<form name="myForm">
    <input type="text" name="test1"  data-ng-pattern="/^(100(?:\.00)?|0(?:\.\d\d)?|\d?\d(?:\.\d\d)?)$/" data-ng-model="model.amount" /> 
    <span data-ng-show="myForm.test1.$error.pattern">invalid</span> 
    <span>{{model.amount}}</span><br/>
</form>

请检查工作Ex。这里 https://plnkr.co/edit/WSqMHsLSCkRk7VVsNfHQ?p=preview

Answer 2

您可以使用ng-pattern执行此操作。每当值发生变化时，它会将ng模型值与模式进行比较。

查看文档here

Answer 3

尝试参考：

var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) { 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>Enter Decimal:<br>
<input type="number" name="decimal" ng-model="decimal" required ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/">
<span style="color:red" ng-show="myForm.decimal.$dirty && myForm.decimal.$invalid">
<span ng-show="myForm.decimal.$error.required">please enter decimal value.</span>
<span ng-show="myForm.decimal.$invalid">only two decimal places are allwed.</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.decimal.$dirty && myForm.decimal.$invalid">
</p>

</form>

如何在角度中添加模式验证

3 个答案: