AngularJS比較$ viewValue與ng模型或對象參數

Question

我有一個動態表單，利用ng-min/ng-max進行驗證。我的ng-min分別綁定到對象參數modelParam.maxvalue和modelParam.minvalue。我的要求是顯示一些警報或錯誤，如果我的表單域中輸入的值超過ng-max或低於ng-min。在這方面非常簡單。我試圖用$ viewValue做這件事，但它沒有按計劃完成。

我的形式：

<form name="modelParamsForm" novalidate>  

<div class="form-group col-md-4" ng-repeat="modelParam in modelParams" ng- 
class="{ 'has-error' : modelParamsFieldForm.value.$invalid }"> 

    <ng-form name="modelParamsFieldForm"> 

     <label class="col-md-5">{{ modelParam.paramname }}</label>    
     <input type="number" class="form-control input-sm col-md-5" ng- 
     model="modelParam.value" name="value" ng-min="modelParam.minvalue" 
     ng-max="modelParam.maxvalue" required style="maxhight: 20px"> 
     <span ng-show="modelParamsFieldForm.value.$invalid"></span> 
     <span ng-if="$viewValue > modelParam.maxvalue">Error message</span> 
     <span ng-if="$viewValue < modelParam.minvalue">Error message</span> 

    </ng-form> 
</div> 
...  

我的控制器是非常標準的...

$scope.modelParams = {}; 
$scope.loadModelParams = function(modelName) { 
     var req = { 
       method : 'GET', 
       url : urlPrefix + 'PB_OPTIMISER_GET_MODEL_PARAMS', 
       params: {modelName : modelName}   
      }; 
     $scope.loading = true; 
     $http(req).then(function(response) { 
      $scope.loading = false; 
      $scope.modelParams = response.data; 
      $scope.modelParamsOld = angular.copy($scope.modelParams); 
     }, function() { 
      $scope.loading = false; 
     }); 

    };     

很顯然，我做了一些錯誤與

<span ng-if="$viewValue > modelParam.maxvalue">Error message</span> 
<span ng-if="$viewValue < modelParam.minvalue">Error message</span> 

我相信它產生於我誤解如何使用$ viewValue。

Answer 1

請記住，$ viewValue適用於特定的ngModel實例。它不是一個普通的價值。例如，如果你有多個輸入，每個輸入都有它自己的$ viewValue。因此，在span元素中，您需要指定您指的是哪個ngModel。在視圖中執行此操作的簡單方法是使用表單和輸入字段的名稱屬性。還要記住，在輸入的情況下，$ viewValue是一個字符串，所以當將其與最小值和最大值進行比較時，您需要使用其長度屬性。看看更新的代碼，以反映這些變化：

<ng-form name="modelParamsFieldForm"> 
    <label class="col-md-5">{{ modelParam.paramname }}</label>    
    <input type="number" class="form-control input-sm col-md-5" ng- 
     model="modelParam.value" name="value" ng-min="modelParam.minvalue" 
     ng-max="modelParam.maxvalue" required style="maxhight: 20px"> 
    <span ng-show="modelParamsFieldForm.value.$invalid"></span> 
    <span ng-if="modelParamsFieldForm.value.$viewValue.length > modelParam.maxvalue">Error message</span> 
    <span ng-if="modelParamsFieldForm.value.$viewValue.length < modelParam.minvalue">Error message</span> 
</ng-form> 

UPDATE

的jsfiddle從一個工作示例：here