maxlegth not working using template driven form in angular 6

Question

I am developing one register form in that form i need maxlength validation but using template driven form can't show maxlength alert message.

<input  type="text" class="form-control" placeholder="Enter  Name"maxlength="4" 
        name="name"  [(ngModel)]="name" ngModel required #username="ngModel">
<div *ngIf="username.invalid && (username.dirty || username.touched)">
    <p style="color:red;font-size:10px;" *ngIf='username.invalid.maxlength'>
        You enter only 4 characters.
    </p>
</div>

Answer 1

Try:

<form name="form" role="form" #form="ngForm">
  <div class="form-group">
    <label class="form-control-label" for="userName">UserName</label>
      <input 
             type="userName" 
             class="form-control" 
             id="userName" 
             name="userName"                              
             #userNameInput="ngModel" //ngModel variable and template variable should not be the same
             [(ngModel)]="userName" 
             minlength=4 
             maxlength=50 
             required>
      <div *ngIf="userNameInput.dirty && userNameInput.invalid">
        <small class="form-text text-danger" *ngIf="userNameInput.errors.required">
                            Your userName is required.
        </small>
        <small class="form-text text-danger" *ngIf="userNameInput.errors.minlength">
                            Your userName is required to be at least 4 characters.
        </small>
        <small class="form-text text-danger" *ngIf="userNameInput.errors.maxlength">
                            Your username cannot be longer than 50 characters.
        </small>
      </div>
  </div>
</form>

DEMO

Answer 2

For me, the issue was input type="number" .

Once I removed the type number maxLength worked.

Angular version: 8

Answer 3

username.invalid 将是 username.errors？

*ngIf="username.errors?.maxlength"

Answer 4

so there are a couple of steps to follow to validate your input like

please check this

<input
  type="text"
  placeholder="Your full name"
  name="name"
  ngModel
  #userName="ngModel"
  maxlength="4"
  required>

<div *ngIf="userName.errors?.minlength && userName.touched" class="error">
  Minimum of 4 characters
</div>

?.prop is called the “Safe navigation operator”

that means it avoids an exception for null and undefined values in in property paths

Answer 5

As if you use maxlength property for input type it does not allows a user to type anything beyond that length [As I tested in Chrome].

So if you want to display an alert or error message then you can check for input's length property and display error message:

HTML:

Remove maxlength from input type and check for username.value?.length in if condition

<input  type="text" class="form-control" placeholder="Enter  Name" name="username" [(ngModel)]="name" ngModel required #username="ngModel">
  <div *ngIf="username.value?.length > 4">
    <p style="color:red;font-size:10px;">
       You enter only 4 characters.
    </p>
  </div>

WORKING DEMO

Answer 6

I needed to validate the length using the template only and I need it to invalidate the form as well so here is what I did using pattern

<textarea class="form-control" id="Command" rows="3" name="dialogCommand" pattern="^(.|\n){0,4000}$" #comment="ngModel" [(ngModel)]="comment" [ngClass]="{ 'is-invalid': comment?.errors?.pattern }"></textarea>

<div class="text-danger small" *ngIf="comment?.errors?.pattern">The comment cannot be greater than 4000 characters long</div>

This will count on multiple lines.

Hope this helps someone