Javascript maxlegth在angular 6中使用模板驱动表单时不工作

我正在开发一个注册表表单，我需要maxlength验证，但使用模板驱动表单无法显示maxlength警报消息

<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>

您只能输入4个字符。

username.invalid将是username.errors

*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>

最少4个字符

？道具被称为“安全导航操作员”

这意味着它避免了属性路径中null和未定义值的异常

<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>

用户名
您的用户名是必需的。
您的用户名必须至少包含4个字符。
您的用户名不能超过50个字符。

---

就像您对输入类型使用

maxlength

属性一样，它不允许用户键入超出该长度的任何内容[正如我在Chrome中测试的那样]

因此，如果要显示警报或错误消息，则可以检查输入的length属性并显示错误消息：

HTML:

从输入类型中删除

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>

您只能输入4个字符。

---

对我来说，问题是

input type=“number”

一旦我删除了类型

number

maxLength，它就工作了

---

角度版本：8

[（ngModel）]=“name”ngModel

这两个是必需的吗？@Viira这个答案对这个问题很好，对我来说不适用。输入类型它不允许用户输入超出该长度的任何内容，但它不显示警报消息。我尝试了，但不起作用，minlength消息显示，但maxlength警报消息不显示。