AngularJS text input validation with counter

Question

I'm developing an app containing a form which has a text input with ng-model="description". Now I want to validate this text input using ng-maxlength="50" and required. This works fine, but I also want to add a character counter (like 67/50) shown at all times. I'm using the following code to display the counter: {{description.length || 0}}/50

The issue with this, however, is that description.length doesn't return a value when it's greater than 50, because description input is invalid. In my scenario the counter would default to 0/50 when there's no input (and that's fine) but also when input exceeds max length.

I would also like to display my counter in red when the input length's invalid, but that shouldn't be too hard using angular validation css classes.

Of course I could provide custom validation, but I'm positive there's an easier solution.

Maurice · Accepted Answer · 2015-02-14 11:42:15Z

9

Use the form element $viewValue instead like this:

<form name='form'>

  <input type="text" name='description' ng-model='description' ng-maxlength="50">
  {{form.description.$viewValue.length || 0}}/50
</form>

See this plunker

answered Feb 14, 2015 at 11:42

Maurice

27.7k5 gold badges52 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

AngularJS text input validation with counter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related