html - 超出范围时，带有数字的 AngularJS 输入未定义

Question

我正在尝试如下验证自定义输入框

<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
    };
}

但是当我试图在 Blur() 函数中获取输入数字时。

当输入超出或范围时，它会变得不确定。例如，输入 999 但得到 undefined。反正在Blur()中得到999？

Answer 1

您在 Blur 或其他装饰器中有问题。该字段的值应为实际值，否则即使超出指定范围。

<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>