Using expressions in min/max attributes

min and max attributes do not appear to be monitored for validation when an expression is used.

by kriswillis

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<div ng-app="myApp">
    <div ng-controller="FirstCtrl" id="container">
        <h1>Using expressions in min/max attributes</h1>
        <p>
            <code>min</code> and <code>max</code> attributes do not appear to be monitored
            for validation when an expression is used.
        </p>
        <ul>
            <li>Min: {{ min }}</li>
            <li>Max: {{ max }}</li>
        </ul>
    
        <form name="myForm">
            <label for="one">One (Hard coded min/max attributes - <em>works</em>)</label>
            <input type="number" id="one" name="one" required="required"
                min="10" max="20" ng-model="one" />
        
            <label for="two">Two (Expression for min/max attributes - <em>doesn't work</em>)</label>
            <input type="number" id="two" name="two" required="required"
                min="{{ min }}" max="{{ max }}" ng-model="two" />
            
            <label for="submit">&nbsp;</label>
            <button id="submit" ng-disabled="!myForm.$valid">Submit</button>
        </form>
    
        <dl>
            <dt>One</dt>
            <dd>{{ myForm.one.$error }}</dd>
            <dt>Two</dt>
            <dd>{{ myForm.two.$error }}</dd>
        </dl>
    </div>
</div>

CSS

#container {
    margin: 10px;
}

form {
    padding: 20px;
    border: 1px solid #333;
}

.ng-invalid {
    border: 1px solid red !important;
}

JavaScript

var myApp = angular.module('myApp', ['myApp.service']);
var ServiceModule = angular.module('myApp.service', []);

function FirstCtrl($scope) {
    $scope.min = 10;
    $scope.max = 20;
}