logo标签列表

如何使用ng-pattern

regexangularjspugng-pattern
5

我有一个简单的文本输入框，我只想允许浮点数和整数（注意：jade）

input.form-control(type="text", ng-model='usd', ng-pattern="nums",ng-change='convert_to_btc()', placeholder="USD")

然而它并没有起作用，我总是可以在输入框中插入任何字符（我需要做更多的工作才能显示一些东西吗？例如，如果不正确就显示红色边框？或者那些字符甚至不能被输入？）模式是一个正则表达式，因此应该没问题吧？？？
以下是控制器内容：
app.controller("AppCtrl", function AppCtrl($scope, $http, $interval ) {
    //lots of other stuff
    $scope.nums = /^\-?\d+((\.|\,)\d+)?$/; //note no string, it's a  regex
}

这是生成的HTML代码。这可能是问题所在吗？实际上，生成的HTML代码中有一个字符串，而不是正则表达式！
<input type="text" ng-model="usd" ng-pattern="/^\-?\d+((\.|\,)\d+)?$/" ng-change="convert_to_btc()" placeholder="USD" class="form-control ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-pattern">
1
它实际上是在工作的...但它无法防止我输入错误的数据！我需要使用Angular验证来显示某些内容！ - transient_loop
你想要什么？不允许用户输入字符，或者如果用户输入错误字符时显示错误信息？ - squiroid
2个回答
4
我希望这正是您想要做的事情。
请查看以下链接。

http://plnkr.co/edit/BGzLbQHy0ZtHYmom8xA3

<!DOCTYPE html>
<html ng-app="">

<head>
 <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13">      
 </script>
  <style>
    .ng-invalid-pattern {
      border:1px solid #f00;
    }
  </style>
</head>

<body>
  <p>Hello</p>

  <form name='myform'>      
    <input type="text" name='ip' ng-model="usd" ng-pattern="/^\-?\d+((\.|\,)\d+)?$/" 
  ng-change="convert_to_btc()" placeholder="USD"/>
    <p ng-show='myform.ip.$invalid'>Error</p>
  </form>


  </body>

</html>
1
如果您想阻止用户输入字符/字母，只允许他们在输入框中输入数字，则将<input type="text"更改为<input type="number"。
这是一个链接到 Angular Doc 输入框页面的链接，该页面只允许输入数字：input[number]。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接