Question

我有带有默认值输入字段的表单。我想添加对该字段的验证，以使其准确地包含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>

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

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

1 个答案: