ng-maxlength triggers onload and removes value

74 Views Asked by At

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.

0

There are 0 best solutions below