ng-hide automatically triggering on field becoming invalid

Question

I have a text area on which I have applied max length directive of angular:

<textarea placeholder="Quote text here" ng-model="quote.text" ng-maxlength="400" name="text"></textarea>

Now I am also showing the word count by using angular ng-show and ng-hide directive:

<div class="row word-count">
   <h5>Word count :</h5>
   <h5 ng-show="quote.text.length > 0">{{quote.text.length}}</h5> 
   <h5 ng-hide="quote.text.length > 0" class="ng-hide">0</h5>
</div>

the problem is that as soon as word count exceeds the max-length directive the ng-show and ng-hide are automatically triggered as reversed. Is there someway to stop it ?

Are you handling negative lengths? Why have the ng-show and ng-hide? Just print out quote.text.length. It will be 0 when there are no words, right? You just need to default text to empt string. — Davin Tryon, Sep 27 '14 at 08:04

score 1 · Accepted Answer · answered Sep 27 '14 at 05:28

1

How about using the good-old HTML maxlength?

<textarea placeholder="Quote text here" ng-model="quote.text." name="text" maxlength="400"></textarea>

<div class="row word-count">
    <h5>Word count :</h5>
    <h5 ng-show="quote.text.length > 0">{{ quote.text.length }}</h5> 
    <h5 ng-hide="quote.text.length > 0" class="ng-hide">0</h5>
</div>

I personally don't understand the need for ng-maxlength since it just returns an error, but allows you to continue typing!

answered Sep 27 '14 at 05:28

Kousha

32,871
51
172
296

1

maxlength support for textarea element is quite new. Е.g. it doesn't work in IE8/IE9. – Agnislav Sep 27 '14 at 06:54
thanks for your input guys, as I am building a cordova app so it just needs to work in webkit – Faizan Ali Sep 27 '14 at 11:39

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

This is expected behavior for angular validation. If validation fails, the corresponding model returns undefined.

You can try it on Angular site here.

Also, if you need to support IE8/IE9, here is an example of own maxlength directive.

edited May 23 '17 at 11:57

Community

1
1

answered Sep 27 '14 at 06:52

Agnislav

299
1
9

ng-hide automatically triggering on field becoming invalid

2 Answers2