I am working on a dynamic form that uses ng-min/ng-max for validation. The ng-max and ng-min are connected to object parameters modelParam.maxvalue and modelParam.minvalue. I need to show an alert or error message if the value entered in the form field goes beyond ng-max or below ng-min. It sounds simple, but I ran into some issues when trying to implement this using $viewValue.
Here is a snippet of my form:
<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>
...
The controller code looks 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;
});
};
I encountered some errors with
<span ng-if="$viewValue > modelParam.maxvalue">Error message</span>
<span ng-if="$viewValue < modelParam.minvalue">Error message</span>
I believe my confusion lies in how to properly utilize $viewValue in this context.