CODEWITHSUNDEEP
angularjs
Bobby Shark
Bobby Shark

Reputation: 1074

AngularJS ng-bind does not display negative numbers

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>

Upvotes: 1

Views: 437

Answers (2)

dfsq
dfsq

Reputation: 193261

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

Upvotes: 1

rob
rob

Reputation: 18513

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.

Upvotes: 1

Related Questions