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>

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>

• javascript
• angular
• angular6

• 2 [(ngModel)]="name" ngModel Does these two required? – Jai Commented Dec 24, 2018 at 7:46

6 Answers 6

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

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

Once I removed the type number maxLength worked.

Angular version: 8

username.invalid will be username.errors?

*ngIf="username.errors?.maxlength"

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

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

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}$" #ment="ngModel" [(ngModel)]="ment" [ngClass]="{ 'is-invalid': ment?.errors?.pattern }"></textarea>

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

This will count on multiple lines.

Hope this helps someone