AngularJS Binded model to Select update input number field with min max

Question

Very confusing because I tried a lot of ways around it and all seem messy.

The view

<select ng-model="somemodel" ng-options="val as val.name for val in vals" ng-init="somemodel=vals[2]"></select>
<input type="number" ng-model="somemodel.value" min="{{somemodel.min}}" max="{{somemodel.max}}">
{{somemodel.value}}

The controller

function appCtrl($scope) {
$scope.somemodel = "";
$scope.vals = [
  {name:"a", min:"1", max:"10", value:4},
  {name:"b", min:"10", max:"20", value:14},
  {name:"c", min:"21", max:"31", value:24},
  {name:"d", min:"31", max:"41", value:34}];
}

When i change the select, it updates the model, but not the input. Whereas if i change the input it also updates the model. How can i get select to update view for the input in an AngularJS way?

Here the situation is demonstrated: http://jsfiddle.net/rq8qs/4/

Update: updated the fiddle

update2: changed value into number type

WORKAROUND http://jsfiddle.net/rq8qs/10/

debugging the non-minified source (v1.2.5), it seems that the min/max-Validator (line 16020 and following) are allways one digest behind. This is observable if you log var min = parseFloat(attr.min);. I'd say this could be called a bug, for I can't find any documentation describing this as intended. — Yoshi
– Yoshi, Commented Dec 15, 2013 at 12:50
You should update the question to show that the validation is the real problem here. — Mouagip
– Mouagip, Commented Dec 15, 2013 at 12:58

Yoshi · Accepted Answer · 2013-12-15 14:16:53Z

3

Seeing that this is probably an (for now at least) unsolvable problem, due to the way the validator is implemented in the angular core. I think faking the behaviour is your best bet. For this, the following would work:

<input
  ng-model="v.value"

  ng-repeat="v in values"
  ng-if="v == selected"

  type="number"
  min="{{v.min}}"
  max="{{v.max}}"
>

demo: http://jsbin.com/AmOHoHa/2/

answered Dec 15, 2013 at 14:16

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blaise · Accepted Answer · 2014-05-08 14:16:44Z

I wrote a simple directive for this.

Working demo: http://plnkr.co/edit/BJ98ZR?p=preview

.directive('validateRange', ['$parse', function($parse) {

    function link($scope, $element, $attrs, ngModel) {
        var attrRange, range = [];

        function validate(value) {
            var validMin = true, validMax = true;
            if (typeof range[0] === 'number') {
                ngModel.$setValidity('min', value >= range[0]);
                validMin = value >= range[0];
            }
            if (typeof range[1] === 'number') {
                ngModel.$setValidity('max', value <= range[1]);
                validMax = value <= range[1];
            }
            return validMin && validMax ? value : undefined;
        }

        attrRange = $attrs.validateRange.split(/,/);

        range[0] = $parse(attrRange[0] || '')($scope);
        range[1] = $parse(attrRange[1] || '')($scope);

        $scope.$watchCollection('[' + $attrs.validateRange + ']', function(values) {
            range = values;
            validate(ngModel.$viewValue);
        });

        ngModel.$parsers.unshift(validate);
        ngModel.$formatters.unshift(validate);
    }

    return {
        link: link,
        require: 'ngModel'
    };

}]);

<form name="myform" ng-init="minvalue=0;value=1;maxvalue=2">
    Min Value:
    <input type="number" name="minvalue" required
           data-validate-range="0,value"
           ng-model="minvalue">

    Value:
    <input type="number" name="value" required
           data-validate-range="minvalue,maxvalue"
           ng-model="value">

    Max Value:
    <input type="number" name="maxvalue" required
           data-validate-range="value,false"
           ng-model="maxvalue">

    <pre>
        myform.minvalue.$error {{ myform.minvalue.$error }}
        myform.value.$error    {{ myform.value.$error }}
        myform.maxvalue.$error {{ myform.maxvalue.$error }}
    </pre>
</form>

Collectives™ on Stack Overflow

AngularJS Binded model to Select update input number field with min max

2 Answers 2

Comments

Working demo: http://plnkr.co/edit/BJ98ZR?p=preview

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Working demo: http://plnkr.co/edit/BJ98ZR?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Related