This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
max validator of input element do not work as expected on some cases #10307
Closed
Description
Demo Html, or view it on Plunker
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script>
angular.module("foo", []).controller("fooCtrl", function ($scope) {
$scope.limit3 = 2;
});
</script>
<style>
input.ng-invalid {
background-color: red;
}
</style>
</head>
<body ng-app="foo">
<label>Form 1</label>
<form action="/" method="post">
<!--no controller-->
<input type="number" ng-model="limit1" placeholder="limit" />
<input type="number" max="{{limit1}}" ng-model="used1" placeholder="used" />
</form>
<br />
<label>Form 2</label>
<form action="/" method="post">
<!--no controller, use ng-init directive-->
<input type="number" ng-init="limit2=2" ng-model="limit2" placeholder="limit" />
<input type="number" max="{{limit2}}" ng-model="used2" placeholder="used" />
</form>
<br />
<label>Form 3</label>
<form action="/" method="post" ng-controller="fooCtrl">
<!--has controller-->
<input type="number" ng-model="limit3" placeholder="limit" />
<input type="number" max="{{limit3}}" ng-model="used3" placeholder="used" />
</form>
</body>
</html>Result:
The problem if that form 1 can not detect the max error.
This issue was found in both 1.2.x and 1.3.x.
I haven't test the other validators, such as min, max-length, may be there are some problem.