AngularJS input with number get undefined when out of range

Question

I am trying to validate custom input box as following

<div class="form-group">
<label for="inputNetwork" class="control-label">{{'DNS_PRIMARY' | translate}}</label>
<div class="control-content">
    <p>
        <input type="number" integer min="1" max="223"
            class="ip-single-column" ng-model="network.dnsPrimary[0]" name="dnsP0" required ng-blur="dnsBlur('P', 0)"
            ng-class="{'has-error': networkForm.dnsP0.$invalid}" validate-dns>.
        <input type="number" integer min="0" max="255"
            class="ip-single-column" ng-model="network.dnsPrimary[1]" name="dnsP1" required ng-blur="dnsBlur('P', 1)"
            ng-class="{'has-error': networkForm.dnsP1.$invalid}" validate-dns>.
        <input type="number" integer min="0" max="255"
            class="ip-single-column" ng-model="network.dnsPrimary[2]" name="dnsP2" required ng-blur="dnsBlur('P', 2)"
            ng-class="{'has-error': networkForm.dnsP2.$invalid}" validate-dns>.
        <input type="number" integer min="0" max="254"
            class="ip-single-column" ng-model="network.dnsPrimary[3]" name="dnsP3" required ng-blur="dnsBlur('P', 3)"
            ng-class="{'has-error': networkForm.dnsP3.$invalid}" validate-dns>
    </p> 
</div>

       $scope.dnsBlur= function(section, pos) {

        var elem = $scope.network.dnsPrimary;
        var i = pos;
        if(section.endsWith('P')) { 
            // primary
            switch(i) {
                case 0:
                    if (angular.isUndefined(elem[i]) || (elem[i] < 1 && elem[i] > 223))
                        elem[i] = $scope.defaultDns[i];
                    break;
                case 1:
                    // if (!elem[i] || (elem[i] < 0 && elem[i] > 254))
                    if (angular.isUndefined(elem[i]) || (elem[i] < 0 && elem[i] > 254))
                        elem[i] = $scope.defaultDns[i];
                    break;
                case 2:
                    if (angular.isUndefined(elem[i]) || (elem[i] < 0 && elem[i] > 255))
                        elem[i] = $scope.defaultDns[i];
                    break;
                case 3:
                    if (angular.isUndefined(elem[i]) || (elem[i] < 0 && elem[i] > 254))
                        elem[i] = $scope.defaultDns[i];
                    break;
            }
        }
    }




}]).directive('validateDns', ['$rootScope',
function($rootScope) {
    function link($scope, elem, attrs, c) {
        $scope.$watch(attrs.ngModel, function(newValue, oldValue) {
            c.$setValidity('outOfRange', true);


            switch(c.$name.charAt(c.$name.length - 1)) {
                case 0:
                    if (!$scope.network.dnsPrimary[i] || ($scope.network.dnsPrimary[i] < 1 && $scope.network.dnsPrimary[i] > 223))
                        c.$setValidity('outOfRange', false);
                    break;
                case 1:
                    if (!$scope.network.dnsPrimary[i] || ($scope.network.dnsPrimary[i] < 0 && $scope.network.dnsPrimary[i] > 255))
                        c.$setValidity('outOfRange', false);
                    break;
                case 2:
                    if (!$scope.network.dnsPrimary[i] || ($scope.network.dnsPrimary[i] < 0 && $scope.network.dnsPrimary[i] > 255))
                        c.$setValidity('outOfRange', false);
                    break;
                case 3:
                    if (!$scope.network.dnsPrimary[i] || ($scope.network.dnsPrimary[i] < 0 && $scope.network.dnsPrimary[i] > 254))
                        c.$setValidity('outOfRange', false);
                    break;
            }

        });
    }
    return {
        require: 'ngModel',
        link: link
    };
}

But when I trying to get input number in Blur() function.

It will get undefined when the input out or range. For example, input 999 but get undefined. Is it anyway to get 999 in Blur()?

validate-ip is a directive that you wrote? can you add it so we can see what it does? — Rabbi Shuki Gur
– Rabbi Shuki Gur, Commented Jul 4, 2017 at 10:29

bluehipy · Accepted Answer · 2017-07-04 10:44:54Z

1

You have a problem in Blur or in the others decorators in there. The value of the field should be the actual value otherwise even if it is out of the specified range.

<form action="#" onsubmit="console.log(this.quantity.value);return false;">
  Quantity:
  <input type="number" name="quantity"
   min="0" max="100" step="10" value="30" onblur="console.log(this.value);">
  <input type="submit">
</form>

answered Jul 4, 2017 at 10:44

bluehipy

2,2941 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ertuğrul Altınboğa Over a year ago

update my original questino snippet. I have try your code it works. when I add onblur=console.log(this.value) it also works in my code. but when I change it to ng-blur it doesn't work. even if I add network.dnsPrimary[i] into dnsBlur function.

bluehipy Over a year ago

My guess is that the validate function makes the input value invalid on ng- directives.

bluehipy Over a year ago

I would go with a validation per field validate-dns-segment and a validation per model which would be valid on all segments are valid.

Ertuğrul Altınboğa Over a year ago

Because I have to implement it when primary DNS is empty will auto adjust to 0~255. and for secondary DNS will keep it empty. So, I need to check the value of input. But in ng-blur I get undefined when it out of range or empty. Cound you give a brief sample of validation you are talk about? Thanks.

bluehipy Over a year ago

use ngSubmit for validation, maybe

Ertuğrul Altınboğa · Accepted Answer · 2017-07-05 00:22:16Z

0

I found an answer at here Angular ng-model changes to undefined when checkbox on ng-repeat has the required attribute

But need AngularJS after 1.3.

I am using AngularJs 1.2. So, I need to find another way out.

answered Jul 5, 2017 at 0:22

Ertuğrul Altınboğa

2,6974 gold badges22 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS input with number get undefined when out of range

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related