Question

Angular 2有一些内置的验证器，如 maxlength ， minlength 和 pattern 。我写了这行代码：

 <input id="mobile" type="text" class="form-control" name="mobile"
   minlength="10">

如果用户输入例如5位数字并转到下一个输入字段，则会出现错误，例如“您输入的数字不正确”。

如何使用Angular 2做到这一点？

在角度1中很容易就像这样

         <p class="help-block" ng-if="editForm.mobile.$error.minlength">

          <h3>This field is required to be at least 10 characters.</h3>
         </p>

Answer 1

如果您使用的是模板驱动表单，则需要更改输入以对组件中的变量进行ngModel绑定，并使用模板变量名称：

<input id="mobile" type="text" class="form-control" name="mobile" [(ngModel)]="mobileNumber"
   #mobile="ngModel" minlength="10">
<div *ngIf="mobile.errors?.minlength">Minimum length not met</div>

对于您的问题，评论中的这个链接非常适合理解这一点，因为它有诸如

之类的说明

我们将输入框的name属性设置为“mobile”，以便Angular可以   跟踪此输入元素并将其与Angular表单控件相关联   在其内部控制模型中调用名称。

我们使用[（ngModel）]指令将输入框的双向数据绑定到   hero.name属性。

我们将模板变量（#mobile）设置为值“ngModel”（始终为   ngModel）。这为我们提供了Angular NgModel指令的参考   与此控件相关联，我们可以在模板中使用以进行检查   用于控制状态，例如有效和脏。

以下是您可以使用的http://plnkr.co/edit/dxtIkZI1dhp07lvega5P

angular 2：使用内置验证器验证输入字段

1 个答案: