javascript - 如何在angularjs中将输入字段验证为总页数

Question

我目前有一个表单，用户可以在其中输入他们想要指定的文档的开始页码和结束页码。还允许用户创建更多行的起始页和结束页。我想要实现的验证之一是计算用户选择的总页数等于他们输入页码的文档的总页数。我在总页面验证方面遇到了问题。不太确定我应该把逻辑放在哪里......

HTML:

<form name="pageForm" ng-submit="submitPageForm(pageForm.$valid)" novalidate>
    <div class="form-group col-sm-3" ng-repeat="file in pages.items">
        <label for="start">Pages </label>
        <input type="number" name="startPage" class="form-control" id="start" ng-model="file.startNumber">
        <label for="end"> - </label>
        <input type="number" name="endPage" class="form-control" id="end" ng-model="file.endNumber" ng-change="autoStartPageNumber($index)">
    </div>

    <div class="row">
        <label for="totalPage">total: {{totalPage}}</label>
        <input type="number" ng-model=totalPage>
    </div>

    <div class="row">
        <div class="col-sm-2">
            <a href="#" ng-click="addRow()">Add another document</a>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-2">
            <button type="submit" class="btn btn-default" ng-disabled="pageForm.$invalid">Done</button>
        </div>
    </div>
    {{result}}
</form>

Controller :

    $scope.pages = {
    items: [{
        startNumber: 1,
        endNumber: ''
    }, {
        startNumber: '',
        endNumber: ''
    }]
};
$scope.totalPage = 10;
$scope.autoStartPageNumber = function(index) {
    if (index + 1 < $scope.pages.items.length) {
        $scope.pages.items[index + 1].startNumber = $scope.pages.items[index].endNumber + 1;
    }
};
$scope.addRow = function() {
    $scope.pages.items.push({
        startNumber: $scope.pages.items[$scope.pages.items.length - 1].endNumber + 1,
        endNumber: ''
    });
};
$scope.submitPageForm = function(isValid) {
    // check to make sure the form is completely valid
    if (isValid) {
        $scope.result = 'form is valid!';
    } else {
        $scope.result = 'form is invalid!';
    }
};

JSFIDDLE EXAMPLE

编辑:例如，如果总页数是 10...那么我希望用户能够选择 1 - 5 和 6 - 10 之类的选项以使其有效。如果总页数关闭，例如 1 - 3 和 4 - 11...那么我想抛出一个错误

Answer 1

您可以将总页数设置为您计算的字段，而不是从用户那里获取。这样您就不必对其进行验证。

JS:

$scope.autoStartPageNumber = function(index) {
    if (index + 1 < $scope.pages.items.length) 
        $scope.pages.items[index + 1].startNumber = $scope.pages.items[index].endNumber + 1;
    else
        $scope.totalPage = $scope.pages.items[index].endNumber;
};

演示:https://jsfiddle.net/60f7v8h4/8/

更新:如果您想在用户点击完成按钮时抛出错误，您可以检查总页和结束页是否相同。

 $scope.autoStartPageNumber = function (index) {
     if(index +1 < $scope.pages.items.length){
       $scope.pages.items[index+1].startNumber=$scope.pages.items[index].endNumber + 1;
     }
     else
             $scope.length=$scope.pages.items[index].endNumber;
    };

             if($scope.length!= $scope.totalPage){
                $scope.errorFlag=true;
            }

演示:https://jsfiddle.net/60f7v8h4/12/