Angular maxlength attribute is preventing input?

Question

The old ng-maxlength="5" used to trip the field error on but would continue to allow input by the user. The maxlength="5" seems to be preventing input. Is it angular doing this as I have the novalidate on my form? Should it be prevented as I see examples of folks actually testing for errors.maxlength?

Here is my form snippet:

<form #myForm="ngForm"  novalidate>

  <h2>{{ hero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>

    <input #inputElement name="heroName" class="form-control"  [(ngModel)]="hero.name" required maxlength="5" #heroName="ngModel">

</form>

We would like behavior like ng-maxlength as we think it is clearer to the user. That is, rather than preventing input, allow the user to keep typing but show the error. Am I doing something wrong or do we need to create our own custom validation directive to replace maxlength?

You could consider custom directive that will call custom Validator to validate length of input field, check out this blog — Pankaj Parkar
– Pankaj Parkar, Commented Jan 16, 2018 at 19:39

vince · Accepted Answer · 2018-01-16 19:46:03Z

4

The attribute you are using is the default HTML maxlength attribute, which prevents further input after the maximum number of characters is reached. If you want to allow further input and track it, you will need to use a custom validation directive, as you suggested.

answered Jan 16, 2018 at 19:46

vince

8,3463 gold badges39 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Angular maxlength attribute is preventing input?

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