17

HTML provides a standard maxlength attribute since version 4.01. Angular provides a ng-maxlength directive.

The difference is that the standard approach doesn't allow entering more than max, while Angular's approach just generates a validation error.

Why did they decide to include such a directive? It's not because of dynamic data binding of maxlength since the behaviour is inconsistent. It's not because of compatibility since it's available even in HTML 4.01. My only guess is that it's there to provide an alternative validation paradigm, but it sounds like over-engineering.

Den
  • 1,827
  • 3
  • 25
  • 46
  • As you said - `maxlength` defines the property of an HTML element. `ng-maxlength` defines how to validate a model. Maybe it's over-engineered, maybe not. I guess it is pretty arbitrary. – Liglo App Nov 13 '14 at 11:20
  • The same thing you could ask, why to use `ng-validate` to check if something is a number, or just use `` (forget the compatibility issues for a while) – Liglo App Nov 13 '14 at 11:24
  • 4
    IHMO, I think it's mainly because of the form management of Angular : https://docs.angularjs.org/api/ng/directive/form > ngMaxLength is binded to validation / error events (and related CSS classes), when HTML attribute is not. – enguerranws Nov 13 '14 at 11:25
  • 1
    @BarthZalewski - fair point: http://programmers.stackexchange.com/questions/262659/which-user-input-validation-approach-is-better-preventing-or-explaining – Den Nov 13 '14 at 11:39
  • That's a good one, @Den – Liglo App Nov 13 '14 at 12:27
  • Does that really need a flawed-concept tag?... – zneak Apr 28 '16 at 16:45
  • @zneak it's the best companion tag for HTML, JavaScript and JS frameworks. – Den Apr 29 '16 at 08:19
  • @den see my answer below. Consider updating the accepted answer for the sake of new visitors. – MrPizzaFace Apr 29 '16 at 15:38

2 Answers2

15

Not only it provide validation for max length, it also adds a class ng-invalid-maxlength. so when you put anything beyond the limit ng-invalid-maxlength class will placed there and in that class you can write your own css.

So after key press if validation fails, the css will be invoked simultaneously and reflects on your UI.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
KanhuP2012
  • 407
  • 3
  • 9
  • "This directive is also added when the plain maxlength attribute is used"... so this answer is longer correct. – Ben George Aug 17 '16 at 04:18
15

The previous answer may of been correct in earlier versions of angular but as of today and Angular v1.5.5, it looks like maxlength does exactly the same thing as ng-maxlength but also enforces the HTML inputs maxlength property on inputs of type text.

Example:

<input type="text" maxlength=5>

maxlength will enforce a 5 character max on the input and also add the correct angular validation class to the input.

Whereas ngMaxlength will only enforce validation. See: https://docs.angularjs.org/api/ng/directive/ngMaxlength

Advise: Just use maxlength.

MrPizzaFace
  • 7,807
  • 15
  • 79
  • 123