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