角度2：使用内置的验证器验证输入字段

debugcn 发表于 Dev

用户名

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>

沉默寡言

如果您使用的是模板驱动的表单，则需要更改输入以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>

有关您的问题的评论中的该链接对于理解此内容非常有用，因为它具有如下说明：

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

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

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

您可以通过以下方法来解决这个问题：http ://plnkr.co/edit/dxtIkZI1dhp07lvega5P

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。