AngularJS将$ viewValue与ng-model或对象参数进行比较 [英] AngularJS comparing $viewValue against ng-model or object param

问题描述

我有一个动态表格，利用ng-min/ng-max进行验证.我的ng-max&ng-min分别绑定到对象参数modelParam.maxvalue和modelParam.minvalue.我的要求是，如果在我的表单字段中输入的值超过ng-max或低于ng-min，则显示一些警报或错误.在这方面非常简单.我尝试使用$ viewValue来执行此操作，但是并没有按计划进行.

I have a dynamic form that utilizes ng-min/ng-max for validation. My ng-max & ng-min are bound to object parameters modelParam.maxvalue and modelParam.minvalue, respectively. My requirement is to display some alert or error if the value entered in my form field exceeds ng-max or falls belows ng-min. Quite simple in that regard. I tried doing this with $viewValue, but it did not quite work out as planned.

我的表单:

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

我的控制器很标准...

My controller is pretty standard...

$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的误解造成的.

I am sure it arises from my misunderstanding of how exactly to use $viewValue.

推荐答案

请记住，$ viewValue用于特定的ngModel实例.它不是通用值.例如，如果您有多个输入，则每个输入都有其自己的$ viewValue.因此，在span元素中，您需要指定要引用的ngModel.在视图本身中执行此操作的一种简单方法是使用表单和输入字段的名称属性.还要记住，在输入的情况下，$ viewValue是一个字符串，因此在将其与最小值和最大值进行比较时，需要使用其length属性.查看更新的代码以反映这些更改:

Remember that the $viewValue is for a particular ngModel instance. Its not a generic value. For example if you had multiple inputs, each would have its own $viewValue. Therefore in the span element you need to specify which ngModel you are referring to. An easy way to do this in the view itself is to use the name attributes of the form and input field. Also remember that in the case of an input, the $viewValue is a string, so when comparing it to min and max value, you need to use its length property. Take a look at the updated code to reflect these changes:

<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，带有一个有效的示例: 此处

jsfiddle with a working example: here

这篇关于AngularJS将$ viewValue与ng-model或对象参数进行比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！