C# 如何在angular中添加模式验证

我有一个带有浮动属性的模型

公共浮动金额{get；set；}

以及显示和编辑金额值的文本框

只接受一个数字

“我的文本框”应允许输入字符，输入时应显示错误消息

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

---

当我选中时，我可以看到在文本框{{model.amount}中输入字符时，该框变为空白。我认为这就是问题所在。有人能建议在这种情况下做什么吗？

您可以添加ng模式或使用step attr添加html5输入类型编号

HTML5

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>

无效的
{{model.amount}}

带最小值和最大值的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>

无效的
{{model.amount}}

请在这里查一下工作证

---

您可以使用

ng模式来执行此操作。每次值发生变化时，它都会将ng模型值与模式进行比较

请参阅文档
尝试引用以下内容：


var-app=angular.module（'myApp'，[]）；
app.controller（'validateCtrl'，函数（$scope）{
});

验证示例
输入十进制：

请输入十进制值。
小数点后只有两位。



它没有触发验证消息。请将此标记添加到表单标记中，然后再次检查。我还更新了Ans。无效{{model.amount}}
如果我输入characterstype=number，则不会显示任何内容。限制文本框输入字符。它只允许数字。我的要求是允许textbox输入字符并显示验证消息我已经为给定代码添加了工作plnkr请找到它var app=angular.module（'myApp'，[]）；app.controller（'costCtrl'，函数（$scope）{$scope.price=11.2；}）；我修改了文本框，将输入的数字格式化为两个小数点。实际要求是限制通过keybor输入小数点（我使用指令完成了此操作），并在显示数字时将其格式化为2个十进制/浮点数。我在我的数据ng模型中使用了货币和数字：2。但它使我的领域成为只读
<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>