Question

我有一个动态表单，它使用ng-min / ng-max进行验证。我的ng-max＆amp; 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是一个字符串，因此在将其与min和max值进行比较时，您需要使用其length属性。请查看更新的代码以反映这些更改：

<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

AngularJS将$ viewValue与ng-model或object param进行比较

1 个答案: