CODEWITHSUNDEEP
angular
Scott
Scott

Reputation: 505

Angular maxlength attribute is preventing input?

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?

Upvotes: 5

Views: 5380

Answers (1)

vince
vince

Reputation: 8306

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.

Upvotes: 4

Related Questions