anglejsの総ページ数に対する入力フィールドの検証方法

Question

現在、ユーザーは指定したいドキュメントの開始ページ番号と終了ページ番号を入力できるフォームがあります。ユーザーは、開始ページと終了ページのさらに多くの行を作成することもできます。私が実行したい検証の1つは、ユーザーが選択したページの総数が、ページ番号を入力するドキュメントの総ページ数と等しいことを計算することです。ページ全体の検証に問題があります。総ページ数がある場合たとえば、 ：

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

コントローラ：

$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

EDIT私はで...

HTMLロジックを置くべき場所は本当にわかりません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/

更新：あなたは、ユーザーが[Done]ボタンをクリックしたときにエラーをスローする場合ならば、あなたがチェックを行うことができます合計ページと終了ページが同じかどうかを確認します。

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