Angular 5 - 使用默认值验证输入字段答案

【问题标题】：Angular 5 - Validate input field with default valueAngular 5 - 使用默认值验证输入字段
【发布时间】：2018-07-05 07:55:45
【问题描述】：

我的表单带有默认值的输入字段。我想为该字段添加验证，使其恰好包含 5 个字符。

<td>
    <input type="text" maxlength="5" ngModel 
    #number="ngModel" name="number" value="{{data.number}}" class="form-control">
</td>

问题是我无法获取该默认值以进行验证，因为输入的值显示 mi 空字符串“”。如果我更改该值，则正确的值是可见的。在这种情况下有没有办法使用验证器？

解决方案：

    <td>
    <input type="text" maxlength="5" [(ngModel)]="data.number" 
    #number name="number" class="form-control">
</td>

【问题讨论】：

minlength = 5
但是在开始时（当我有默认值时）我的输入值等于“”。所以我会有错误
如果我添加 required 它将允许插入任何值。

标签： angular validation

【解决方案1】：

您可以使用ReactiveForms 模块并简单地添加所需的验证器。在你的情况下，这样的事情会起作用：

this.myForm = this.formBuilder.group({
      myInput: new FormControl('defaultValue',[Validators.minLength(5),Validators.maxLength(5)])
})

模板：

<form name="myForm" [formGroup]="myForm">
    <label>
    <div>My input</div>
    <input type="text" formControlName="myInput" [ngClass]="{'error': myForm.invalid}">
  </label>
</form>

Here's a working example.

【讨论】：