试试看：

<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

对我来说，问题是input type="number"。
一旦我删除了类型number maxLength工作。
Angular 版本：8

用户名。无效将是用户名。错误？

*ngIf="username.errors?.maxlength"

因此需要执行几个步骤来验证您的输入，例如
请核对一下

<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被称为“安全导航操作符”
这意味着它避免了属性路径中的空值和未定义值的异常

就像你使用maxlength属性输入类型一样，它不允许用户输入超过这个长度的任何内容[正如我在Chrome中测试的]。
因此，如果你想显示一个警告或错误消息，那么你可以检查输入的长度属性，并显示错误消息：
超文本：
从输入类型中删除maxlength并检查if条件下的username.value?.length

<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

我只需要使用模板来验证长度，还需要它来使表单无效，下面是我使用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>

这将计算在多行上。
希望这能帮助到一些人