I currently have a website page in which the user can insert fields like GPS coordinates and a location. I've edited the page which puts a validator on the fields to check them for a maximum length. Current behaviour is that when the length exceeds the threshold, the border around the field gets red and a notification appears below saying "Too long!".
This works for all of the fields, except for the coordinates fields. They look exactly the same, however, when I load the page, the notification below the fields appears and the input box is empty. The border, however, is NOT red. When I remove the ng-maxlength parameter, the coordinates appear like they should be (with value: 5.32706).
<form class="form-horizontal" role="form" name="deviceForm">
<fieldset>
<legend class="text-left">GPS</legend>
<div class="form-group">
<label for="gps.latitude" class="col-sm-2 control-label">Latitude</label>
<div class="col-sm-10">
<input ng-model="device.gps.latitude" type="text" class="form-control" name="latitude" id="gps.latitude" placeholder="" ng-maxlength="15" >
<span class="formValidationError" ng-show="deviceForm.latitude.$error.maxlength">Too long!</span>
</div>
</div>
<div class="form-group">
<label for="container.city" class="col-sm-2 control-label">Place</label>
<div class="col-sm-10">
<input ng-model="device.container.city" type="text" class="form-control" name="city" id="container.city" placeholder="" ng-maxlength="255" >
<span class="formValidationError" ng-show="deviceForm.city.$error.maxlength">Too long!</span>
</div>
</div>
</fieldset>
</form>
Note that using the city variable, everything works correctly.
When I start typing in the now empty latitude field, the notification disappears (the bar was already the normal color). When I exceed the limit, the bar turns red and the notification appears again.
Why does the notification show when the page loads, and why doesn't the value show when I add the ng-maxlength property?
EDIT: I've tried to change the input type to "Number", with no effect.