这段代码很简单，就是用@Directive标签定义了一个指令MobileValidator，它作用的元素是同时具有validateMobile和ngModel属性的元素。这样，我们就可以在手机号的元素上添加一个属性，来使这个验证器指令起作用。
然后，我们还需要Angular的验证器框架能够调用我们的验证方法，这就需要NG_VALIDATORS。我们修改上面的验证器的指令定义如下：
@Directive({ selector: '[validateMobile][ngModel]', providers: [ { provide: NG_VALIDATORS, useValue: validateMobile, multi: true } ] }) export class MobileValidator {}
这样Angular的验证器就能够将validateMobile方法应用在这个指令上。
最后，我们再把这个新的指令，添加到AppModule的declarations里面，就可以在页面上使用这个验证器了。
最后，页面上使用验证器的代码如下：
<input type="text" [(ngModel)]="user.mobile" #mobile="ngModel" required minlength="11" maxlength="11" validateMobile> <span *ngIf="mobile.valid">有效</span> <div [hidden]="mobile.valid || mobile.pristine"> <p *ngIf="mobile.errors?.minlength || mobile.errors?.maxlength">电话长度必须为11</p> <p *ngIf="mobile.errors?.required">必须输入姓名</p> <p *ngIf="mobile.errors?.validateMobile">电话号码格式不正确</p> </div>
以上所述是小编给大家介绍的Angular2表单自定义验证器，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: