我有许多数字输入字段,它们的最小值和最大值属性值取决于AngularJS应用中其他地方的逻辑,但是当在这些属性中使用数据绑定时,它们不再由Angular进行验证,但是,HTML 5验证似乎仍然可以选择它们向上。
var myApp = angular.module('myApp', []); function FirstCtrl($scope) { $scope.min = 10; $scope.max = 20; } <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>
实时版本:http://jsfiddle.net/kriswillis/bPUVH/2/
如您所见,由于HTML / CSS(引导程序)在无效时两个字段都变为红色,因此验证仍然可以很好地处理,但是当第二个字段无效时,提交按钮(由Angular处理)不会被禁用。另外,还有一些中没有的最小值和最大值的属性myForm.two.$error,因为在myForm.one.$error。
myForm.two.$error
myForm.one.$error
谁能看到我要去哪里错了?
显然,我们不能对minand max字段使用{{}}(即插值)。我查看了源代码,发现以下内容:
min
max
if (attr.min) { var min = parseFloat(attr.min);
$interpolate不叫,只是parseFloat,所以你需要指定一个字符串,它看起来像一个数min和max。
$interpolate
parseFloat