CODEWITHSUNDEEP
htmlangularjsvalidationinput
Jake Tigchelaar
Jake Tigchelaar

Reputation: 21

Angular Input invalid when decimal within min and max

I'm having a weird issue that I don't understand why it's happening...

I'm using Angular 1.6.1 and my input is invalid when it is between the max and min values on the input box. This only seems to happen when my values are decimals with a decimal step. I have tested it on Chrome and Edge and it does the same thing. I tried Googling it but couldn't find anything relative. 

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

myApp.controller('MyCtrl', function($scope) {
  $scope.Prices = {
    "Net": {
      "min": 0.00,
      "max": 9999.99
    }
  };
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form name="priceForm" novalidate>
      <div class="form-group" ng-class="{'has-error': priceForm.NetMax.$invalid && priceForm.NetMax.$dirty }">
        <label>Max Price:</label>
        <input class="form-control" name="NetMax" type="number" min="0.00" step="0.01" max="9999.99" ng-step="0.01" ng-model="Prices.Net.max" />
      </div>
    </form>

    <p>
      Try reducing the input to 9999.97. For some reason it is invalid.
    </p>
  </div>
</div>

Upvotes: 1

Views: 550

Answers (1)

Jake Tigchelaar
Jake Tigchelaar

Reputation: 21

Changing my version of Angular to 1.6.4 seems to have solved the issue. There must be a bug in version 1.6.1

Upvotes: 1

Related Questions