Adding ng-minlength to input field

Question

I'm attempting to add ng-minlength and ng-maxlength to a form input field. There is something strange happening. When the a number is entered is less than the min-length it disappears and is never added to the model.

However if you past in a number over 13 digits it renders but is not added to the model.

    app.directive('cmNumber', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        compile: function (element) {
            var onlyNumbers = /^\d+$/;
            element.attr('ng-minlength', '13');
            element.attr('ng-maxlength', '19');
            element.attr('ng-pattern', onlyNumbers);

            element.attr('placeholder', '123456789112345');
            element.removeAttr('cm-Number'); //remove the attribute to avoid infinite loop

            return function (scope, element) {
                    $compile(element[0].form)(scope);
                };
        }
    };
}]);

plunker here http://plnkr.co/edit/G4DaGSt190NTdaognJrJ?p=preview

Why are you using compile rather than adding these values to the template? — Explosion Pills
– Explosion Pills, Commented Jul 28, 2015 at 17:50

Pankaj Parkar · Accepted Answer · 2015-07-28 18:04:47Z

1

Only you need to do change is cm-number instead of cm-Number all should be in small case.

Otherwise your code is totally correct. The reason behind above directive is not working is You are referring to angular beta version 1.3.0-beta.5 which has possibly has broken the thing which you are trying.

You should upgrade it to angular 1.3.15 that is stable version also you could go for angular latest angular 1.4+ versions

Working Plunkr

answered Jul 28, 2015 at 18:04

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

lpoulter Over a year ago

Yes looks like a bug in that version. Unfortunately the project I'm working on uses angular 1.2.28.

Collectives™ on Stack Overflow

Adding ng-minlength to input field

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related