Question

我正在尝试使用Angularjs进行验证。仅当[type = text]时，ng-pattern才能正常工作。当[type =“number”] ng-pattern不起作用，但是必需时，min，max仍然有效。

<input type="number" name="number" ng-model="myNumber" ng-pattern="reg" required />

https://jsfiddle.net/o4hr219m/

我尝试添加attr [novalidate]表单make浏览器不验证，但没有工作。

每个人都有其他想法吗？

非常感谢任何帮助。

谢谢。

Answer 1

如果设置type="number"，则可以使用$error.number代替$error.pattern 因为在值无效时，angular不会将值绑定到模型

<span ng-show="myForm.number.$error.number">no valid</span>

请参阅下面的演示

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {

  $scope.reg = /^[0-9]*$/;


});

.error {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <form name="myForm">
      <label>Value Number</label>
      <input type="number" name="number" ng-pattern="reg" ng-model="value.number" /><span class="error" ng-show="myForm.number.$error.number">no valid</span>
      <br/>Curent error for Value Number
      <pre>{{myForm.number.$error | json}}</pre> 

      <hr/>

      <label>Value Number</label>
      <input type="text" name="text" ng-pattern="reg" ng-model="value.text" /><span class="error" ng-show="myForm.text.$error.pattern">no valid</span>
      <br/>Curent error for Value Number
      <pre>{{myForm.text.$error | json}}</pre> 
      <hr/>



      <input type="submit" value="submit" ng-disable="myForm.$invalid" />
    </form>


  </div>
</div>

Answer 2

更新了小提琴 https://jsfiddle.net/o4hr219m/5/

JS

angular.module('pmsApp', []).controller('testCtrl',function($scope){
    $scope.reg= /^[0-9]\\d*$/;
})

HTML

<input ng-model="number" type="number" name="number" ng-pattern="reg"/>

随你的小提琴：

未定义模块且未使用ng-app
Angular在装载时装入（放入头部或身体）
输入时没有ng-model，因此验证不起作用
请勿使用引号

为什么Angularjs验证不能使用输入[type =＆＃34; number＆＃34;]

2 个答案: