AngularJS ng-bind does not display negative numbers

Question

So i have a textarea with a max length of 100 characters and a model data that displays the remaining characters :

<textarea class="textarea" placeholder="Type here" ng-model="myTextarea" ng-maxlength="100"></textarea>

<span>{{100 - myTextarea.length}}</span>

When I type more than 100 characters in the textarea, the displayed value is 100. How do I allow displaying negative numbers ?

Also how do I disable button when remaining characters are below 0 ? Something like <button ng-disabled="!myTextarea.length > 100">Submit</button>

rob · Accepted Answer · 2014-04-08 19:42:50Z

1

It looks like nothing gets stored in the model when you exceed the limit specified by ng-maxlength. You may need to remove ng-maxlength and just manually validate it.

edited Apr 8, 2014 at 19:42

answered Apr 8, 2014 at 19:36

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

Comments

dfsq · Accepted Answer · 2014-04-08 19:42:55Z

1

When you exceed the limit the field model bocomes empty because it's no longer valid. So what you can do is this:

<form name="myForm">
    <textarea class="textarea" placeholder="Type here" name="myTextarea" ng-model="myTextarea" ng-maxlength="10"></textarea>
    <div>
        Remainging: <span ng-bind="10 - (myForm.myTextarea.$valid ? myTextarea.length : 10)"></span>
    </div>
    <button ng-disabled="myForm.myTextarea.$error.maxlength">Send</button>
</form>

Demo: http://plnkr.co/edit/3VONar0zNp8lRfFsqZDC?p=preview

answered Apr 8, 2014 at 19:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-bind does not display negative numbers

2 Answers 2

Comments

Demo: http://plnkr.co/edit/3VONar0zNp8lRfFsqZDC?p=preview

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Demo: http://plnkr.co/edit/3VONar0zNp8lRfFsqZDC?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Related