How to get min and max values of input angularjs

Question

currently I'm using a custom directive which wraps the ng-minlength and ng-maxlength directives to apply the values of these directives to the model of the input. I need to do this because I'm creating a validation service which uses the angular $error object on a form to return a user friendly message about what's wrong. The problem is, when it comes to min and max lengths, I want to be able to tell the user what the length should be. I've got this working by using the following method

directive('minlength', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        require: 'ngModel',
        compile: function compile(tElement) {
            tElement.attr('ng-minlength', tElement.attr('minlength'));
            tElement.removeAttr('minlength');
            return {
                post: function postLink(scope, elem, attrs) {
                    var keys,
                        form,
                        field = attrs['ngModel'];
                    $compile(elem)(scope);
                    for (keys in scope) {
                        if (scope.hasOwnProperty(keys)) {
                            if (keys.substring(0, 2).indexOf('$') < 0) {
                                if (keys !== 'this') {
                                    form = keys;
                                    break;
                                }
                            }
                        }
                    }
                    if (form) {
                        console.log(attrs);
                        scope[form][field]['minlength'] = attrs['minlength'];
                    }
                }
            }
        }
    }
}])

But this seems a bit longhanded and possibly difficult to maintain and test. Is there a better way to do this?

I'm unsure why you can't use the existing ng-minlength and ng-maxlength. I see that @Avraam seems to agree. Is there some reason why that won't work? — leftiness
– leftiness, Commented Nov 24, 2014 at 21:42
This app is sort of an add on to another application to give their users a web interface to submit requests. The reason I can't just use ng-minlength is because users of my app will create custom forms with custom min and max lengths, so I can't just assume I'll know what it is and type it statically — richbai90
– richbai90, Commented Nov 24, 2014 at 21:55

Avraam Mavridis · Accepted Answer · 2014-11-24 22:03:09Z

3

If you want just to inform the user about the min and the max:

var app = angular.module('myApp',[]);

app.controller('MyCtrl',function($scope){
    $scope.minValue = 5;
    $scope.maxValue = 10;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="myForm">
    Last name: <input type="text" name="lastName" ng-model="user.last"
      ng-minlength="{{minValue}}" ng-maxlength="{{maxValue}}">
    <span class="error" ng-show="myForm.lastName.$error.minlength">
      Should be {{minValue}} charachters long</span>
    <span class="error" ng-show="myForm.lastName.$error.maxlength">
      No more than {{maxValue}} characters please</span><br>
  </form>
</div>
</div>

edited Nov 24, 2014 at 22:03

answered Nov 24, 2014 at 21:53

Avraam Mavridis

8,97023 gold badges87 silver badges136 bronze badges

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

3 Comments

richbai90 Over a year ago

The problem with this method is that it assumes I know what the min and max lengths are. In the final version of the app, customers will be allowed to change these values as they'll be using this app as a front end for their customers

Avraam Mavridis Over a year ago

@richbai90 you can use your controller to inject that value on the form I guess. I will update my answer and lets see if it is what you need.

Avraam Mavridis Over a year ago

@richbai90 I updated my answer, I am not sure how the customers will change the min and the max values but with the controller I think you have this flexibility (or better with a service that is injected in the controller)

Collectives™ on Stack Overflow

How to get min and max values of input angularjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related