javascript - AngularJS 将 $viewValue 与 ng-model 或对象参数进行比较

Question

我有一个动态表单，利用 ng-min/ng-max 进行验证。我的 ng-max 和 ng-min 分别绑定(bind)到对象参数 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>
...     

我的 Controller 非常标准...

$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。在 View 本身中执行此操作的一个简单方法是使用表单和输入字段的名称属性。另请记住，在输入的情况下， $viewValue 是一个字符串，因此在将其与最小值和最大值进行比较时，您需要使用其 length 属性。查看更新后的代码以反射(reflect)这些更改:

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

更新

jsfiddle 与一个工作示例: here