maxlegth 不能使用 Angular 6 中的模板驱动形式答案

【问题标题】：maxlegth not working using template driven form in angular 6maxlegth 不能使用 Angular 6 中的模板驱动形式
【发布时间】：2018-12-24 07:39:53
【问题描述】：

我正在开发一种注册表单，我需要验证最大长度，但使用模板驱动的表单无法显示最大长度警报消息。

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

【问题讨论】：

[(ngModel)]="name" ngModel这两个是必需的吗？

标签： javascript angular angular6

【解决方案1】：

试试：

<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

【讨论】：

不适合我。输入类型它不允许用户输入超出该长度的任何内容，但它不显示警报消息。

【解决方案2】：

对我来说，问题是input type="number"。

一旦我删除了 number maxLength 类型就可以了。

角度版本：8

【讨论】：

【解决方案3】：

username.invalid 将是 username.errors？

*ngIf="username.errors?.maxlength"

【讨论】：

@Viira 这个答案很适合这个问题

【解决方案4】：

因此有几个步骤可以验证您的输入，例如

请检查一下

<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 被称为“安全导航算子”

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

【讨论】：

我试过了，但不行，minlength 消息显示但 maxlength 警告消息没有显示。

【解决方案5】：

就像您使用 maxlength 属性作为输入类型一样，它不允许用户输入超出该长度的任何内容 [正如我在 Chrome 中测试的那样]。

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

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>

WORKING DEMO

【讨论】：

这不是一个很好的建议。这样做不会强制执行该值不得长于请求的长度的事实；用户仍然可以使用无效值提交表单，因为该字段没有实际限制。