CODEWITHSUNDEEP
javascripthtmlangularjsvalidationinput
ankitd
ankitd

Reputation: 2017

How to set min and max value of input control dynamically based on selection Angular

I am looking for some generic solution to update min and max value dynamically based on dropdown selection. Check this Fiddle.

If user select :

I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message. Looking for some generic and reusable solution so It can be reused across application.

Here is my code: HTML

<div ng-app="app">
<div ng-controller="TimeController as vm">
    <label>Desired RPO</label>
    <div>
        <div class="input-group">
            <input type="number" class="form-control" name="desiredRPO" min="minvalue" max="maxvalue" step="1" />
            <div class="input-group-btn" style="display:inline-block;">
                <select class="form-control">
                    <option>HOURS</option>
                    <option>MINUTES</option>
                    <option>SECONDS</option>
                </select>
            </div>
        </div>
        <span>Please enter value between {{minvalue}} and {{maxvalue}}</span>
    </div>
</div>

JS

var app = angular.module('app', []);
app.controller('TimeController', function($scope) {
    var vm = this;
});

Upvotes: 3

Views: 8748

Answers (4)

Valery Kozlov
Valery Kozlov

Reputation: 1577

There are ng-min ng-max directives for dynamic values

<input ng-min="vm.diapason.min" ng-max="vm.diapason.max"/>

<select class="form-control" ng-model="vm.diapason" 
             ng-options="option.label for option in vm.restrictions">
 </select>

and controller with

vm.restrictions = [
  {
    label: 'HOURS',
    min: 1,
    max: 24
  },
  {
    label: 'MINUTES',
    min: 60,
    max: 6000
  },
  {
    label: 'SECONDS',
    min: 3000,
    max: 10000
  }
]

Upvotes: 0

jaguwalapratik
jaguwalapratik

Reputation: 406

See answer here PLUNKER

In your HTML

<div ng-app="app">
   <div ng-controller="TimeController as vm">
   <form  name="vm.timeForm" novalidate>
      <div class="form-group">
        <label>Please select</label>
        <select class="form-control" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()">
            <option value="hours">HOURS</option>
            <option value="minutes">MINUTES</option>
            <option value="seconds">SECONDS</option>
        </select>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : vm.timeForm.desiredRPO.$invalid && !vm.timeForm.desiredRPO.$pristine }">
        <label>Desired RPO</label>
        <input type="number" name="desiredRPO" class="form-control" ng-model="vm.desiredRPO" ng-min="vm.minValue" ng-max="vm.maxValue">
        <p ng-show="vm.timeForm.desiredRPO.$invalid" class="help-block">Please enter value between {{vm.minValue}} and {{vm.maxValue}}</p>
      </div>
   </form>
  </div>

In your controller

var app = angular.module('app', []);
app.controller('TimeController', function($scope) {
   var vm = this;

   vm.timeForm = {};

   vm.updateMinMax = function() {
      if(vm.selectedOption === 'hours') {
         vm.minValue = 1;
         vm.maxValue = 24;
      } else if(vm.selectedOption === 'minutes') {
         vm.minValue = 60;
         vm.maxValue = 6000;
      } else {
         vm.minValue = 3000;
         vm.maxValue = 10000;
      }
   }
});

Upvotes: 2

Karim
Karim

Reputation: 8632

i've just created a working Plunkr , hope it helps.

https://plnkr.co/edit/rCQzEhojZP0iHvoI1KlO?p=preview

INDEX.html

    <!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>

  </head>

  <body ng-app="app">


    <div ng-controller="TimeController as vm">
      <label>Desired RPO</label>
      <div>
        <div ng-init="item=timings[0]" class="input-group">

          <input type="number" class="form-control" name="desiredRPO" min="{{item.min}}" max="{{item.max}}" step="1" />

          <div class="input-group-btn" style="display:inline-block;"> 

            <select
              ng-model="item" 
              ng-options="item.type for item in timings"></select>

          </div>
        </div>
        <span>Please enter value between {{item.min}} and {{item.max}}</span>

      </div>
      <h3>Requirement:    </h3>
      <h4>
      If user select :
      Hours - min and max value should be 1 to 24 <br>
      Minutes - min and max value should be 60 to 6000 <br>
      Seconds - min and max value should be 3000 to 10000 <br>
      </h4>
      <h6>
      I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message.
      Looking for some generic and reusable solution so It can be reused across application.
      </h6>
    </div>

  </body>

</html>

script.js

var app = angular.module('app', []);
app.controller('TimeController', function($scope) {

var vm = this;
$scope.timings = [{type: 'HOURS', min: 1, max: 24}, 
{type: 'MINUTES', min: 60, max: 6000}, 
{type: 'SECONDS', min: 3000, max: 10000}];

});

Upvotes: 0

Sravan
Sravan

Reputation: 18647

Here is your required answer, with a Fiddle

var app = angular.module('app', []);
app.controller('TimeController', function($scope) {

  var vm = $scope;
  
  vm.update_values = function() {
      if(vm.selected === 'hours') {
         vm.min = "1";
         vm.max = "24";
      } else if(vm.selected === 'minutes') {
         vm.min = "60";
         vm.max = "6000";
      } else {
         vm.min = "3000";
         vm.max = "10000";
     }
   }


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></style>

<div ng-app="app">

  <div ng-controller="TimeController">
    <label>Desired RPO</label>
    <div>
      <div class="input-group">

        <input type="number" class="form-control" name="desiredRPO" min="{{min}}" max="{{max}}" step="1" ng-model="time"/>
        

        <div class="input-group-btn" style="display:inline-block;">
          <select class="form-control" ng-change="update_values()" ng-model="selected">
            <option value="">Please Select</option>
            <option value="hours">HOURS</option>
            <option value="minutes">MINUTES</option>
            <option value="seconds">SECONDS</option>
          </select>
        </div>
      </div>
      <span>Please enter value between {{min}} and {{max}}</span>

    </div>
    <h3>Requirement:    </h3>
    <h4>
    If user select :
    Hours - min and max value should be 1 to 24 <br>
    Minutes - min and max value should be 60 to 6000 <br>
    Seconds - min and max value should be 3000 to 10000 <br>
    </h4>
    <h6>
    I am looking for some solution which will update the binding at input control based on selection. Also it should update the validation message.
    Looking for some generic and reusable solution so It can be reused across application.
    </h6>
  </div>

Pls run the code and check

Here is the fiddle

Upvotes: 1

Related Questions