我有许多数字输入字段,其最小和最大属性值取决于我的AngularJS应用程序中的其他位置的逻辑,但是当在这些属性中使用数据绑定时,它们不再由Angular验证,但是,HTML 5验证仍然似乎选择它们起来.
var myApp = angular.module('myApp', []);
function FirstCtrl($scope) {
$scope.min = 10;
$scope.max = 20;
}
Run Code Online (Sandbox Code Playgroud)
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<form name="myForm">
<input type="number" name="one" required="required"
min="10" max="20" ng-model="one" />
<input type="number" name="two" required="required"
min="{{ min }}" max="{{ max }}" ng-model="two" />
<button ng-disabled="!myForm.$valid">Submit</button>
</form>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
现场版:http://jsfiddle.net/kriswillis/bPUVH/2/
正如您所看到的,HTML/CSS(Bootstrap)中的验证仍然可以正常处理,因为两个字段在无效时变为红色,但是,当第二个字段无效时,不会禁用提交按钮(由Angular处理).另外,还有一些中没有的最小值和最大值的属性myForm.two.$error,因为在myForm.one.$error.
谁能看到我哪里出错了?
angularjs ×1