一尘不染

数据绑定数字输入的最小/最大属性时未触发验证

angularjs

我有许多数字输入字段,它们的最小值和最大值属性值取决于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

谁能看到我要去哪里错了?


阅读 199

收藏
2020-07-04

共1个答案

一尘不染

显然,我们不能对minand
max字段使用{{}}(即插值)。我查看了源代码,发现以下内容:

if (attr.min) {
  var min = parseFloat(attr.min);

$interpolate不叫,只是parseFloat,所以你需要指定一个字符串,它看起来像一个数minmax

2020-07-04