示例代码链接
首先从npm包管理服务器上下载安装。
npm install ng2-validation --save 命令参数--save：使npm包信息保存在package.json文件的dependencies配置集合内。该集合是ng2正式运行的依赖集合。
使用方法
在模块文件内添加引用，一般为appmodule。
app.module.ts文件
import { ngmodule } from '@angular/core';import { browsermodule } from '@angular/platform-browser';import { formsmodule,reactiveformsmodule } from '@angular/forms';import { customformsmodule } from 'ng2-validation';import { appcomponent } from './app.component';import { appttemplatedrivencomponent } from './app-ttemplate-driven/app-ttemplate-driven.component';import { appmodeldrivencomponent } from './app-model-driven/app-model-driven.component';import { approutingmodule } from app/app-routes.module;import { validationconfigmodel } from app/models/validation; @ngmodule({ declarations: [ appcomponent, appttemplatedrivencomponent, appmodeldrivencomponent ], imports: [ browsermodule, formsmodule, approutingmodule, customformsmodule, reactiveformsmodule ], providers: [validationconfigmodel], bootstrap: [appcomponent] }) export class appmodule { }
view code
表单验证的使用方式有两种。可以灵活选择。两者混合使用我没研究。其实使用一种就足够了。
模板驱动（template driven）
github上例子
<input type="text" [(ngmodel)]="model.field" name="field" #field="ngmodel" [rangelength]="[5, 9]"/> <p *ngif="field.errors?.rangelength">error message</p>
模型驱动（model driven）
github上例子
<
<p *ngif="demoform.from.controls.field.errors?.rangelength">error message</p>
formgroup需要在from的dom上添加formgroup驱动，否则验证不生效。
<form [formgroup]="formgroup" (ngsubmit)="onsubmit()" #validationform2="ngform" >
下面是我的demo代码片段：
模板驱动app-ttemplate-driven.component.html
<div class="container"> <form (ngsubmit)="onsubmit()" #validationform="ngform"> <div class="form-group"> <label for="appfield">长度要求</label> <input type="text" required class="form-control" name="appfield" [(ngmodel)]="model.appfield" #rangelength="ngmodel" [rangelength]="[5, 9]"> <p [hidden]="rangelength.valid||rangelength.pristine">长度在5到9之间</p> </div> <div class="form-group"> <label for="appfield2">长度要求2</label> <input type="text" class="form-control" name="appfield2" [(ngmodel)]="model.appfield2" #rangelength2="ngmodel" [rangelength]="[0,5]"> <p [hidden]="rangelength2.valid||rangelength2.pristine">长度要求</p> </div> <div class="form-group"> <label for="appmin">最小值</label> <input type="number" class="form-control" name="appmin" [(ngmodel)]="model.appmin" #appmin="ngmodel" [min]="10" /> <p [hidden]="appmin.valid||appmin.pristine">取值大于等于10</p> </div> <div class="form-group"> <label for="appgt">大于</label> <input type="number" class="form-control" name="appgt" [(ngmodel)]="model.appgt" #appgt="ngmodel" [gt]="10" /> <p [hidden]="appgt.valid||appgt.pristine">取值大于10</p> </div> <div class="form-group"> <label for="appgte">大于等于</label> <input type="number" class="form-control" name="appgte" [(ngmodel)]="model.appgte" #appgte="ngmodel" [gte]="10" /> <p [hidden]="appgte.valid||appgte.pristine">取值大于等于10</p> </div> <div class="form-group"> <label for="appmax">最大值</label> <input type="number" class="form-control" name="appmax" [(ngmodel)]="model.appmax" #appmax="ngmodel" [max]="10" /> <p [hidden]="appmax.valid||appmax.pristine">最小值10</p> </div> <div class="form-group"> <label for="applt">小于</label> <input type="number" class="form-control" name="applt" [(ngmodel)]="model.applt" #applt="ngmodel" [lt]="10" /> <p [hidden]="applt.valid||applt.pristine">值小于10</p> </div> <div class="form-group"> <label for="applte">小于等于</label> <input type="number" class="form-control" name="applte" [(ngmodel)]="model.applte" #applte="ngmodel" [lte]="10" /> <p [hidden]="applte.valid||applte.pristine">值小于等于10</p> </div> <div class="form-group"> <label for="apprange">取值范围</label> <input type="number" class="form-control" name="apprange" [(ngmodel)]="model.apprange" #apprange="ngmodel" [range]="[10, 20]" /> <p [hidden]="apprange.valid||apprange.pristine">取值大于等于10到小于等于20</p> </div> <div class="form-group"> <label for="appdigits">数字</label> <input type="text" class="form-control" name="appdigits" [(ngmodel)]="model.appdigits" #appdigits="ngmodel" digits /> <p [hidden]="appdigits.valid||appdigits.pristine">必须是uint</p> </div> <div class="form-group"> <label for="appnumber">数字</label> <input type="text" class="form-control" name="appnumber" [(ngmodel)]="model.appnumber" #appnumber="ngmodel" number /> <p [hidden]="appnumber.valid||appnumber.pristine">任何数字</p> </div> <div class="form-group"> <label for="appurl">链接</label> <input type="text" class="form-control" name="appurl" [(ngmodel)]="model.appurl" #appurl="ngmodel" url /> <p [hidden]="appurl.valid||appurl.pristine">合法的url</p> </div> <div class="form-group"> <label for="appemail">邮箱</label> <input type="text" class="form-control" name="appemail" [(ngmodel)]="model.appemail" #appemail="ngmodel" email /> <p [hidden]="appemail.valid||appemail.pristine">合法的邮箱地址</p> </div> <div class="form-group"> <label for="appdate">日期</label> <input type="text" class="form-control" name="appdate" [(ngmodel)]="model.appdate" #appdate="ngmodel" date /> <p [hidden]="appdate.valid||appdate.pristine">合法的日期</p> </div> <div class="form-group"> <label for="appuuid">uuid</label> <input type="text" class="form-control" name="appuuid" [(ngmodel)]="model.appuuid" #appuuid="ngmodel" uuid="'all'" /> <p [hidden]="appuuid.valid||appuuid.pristine">不是合法的uuid</p> </div> <div class="form-group"> <label for="appphone">电话</label> <input type="text" class="form-control" name="appphone" [(ngmodel)]="model.appphone" #appphone="ngmodel" phone="cn" /> <p [hidden]="appphone.valid||appphone.pristine">不是合法的电话号码</p> </div> <div class="form-group"> <label >两次相同</label> <input class="form-control" type="password" ngmodel name="apppassword" #apppassword="ngmodel" required/> <p [hidden]="apppassword.valid||apppassword.pristine">必填项</p> <input class="form-control" type="password" ngmodel name="appcertainpassword" #appcertainpassword="ngmodel" [equalto]="apppassword"/> <p [hidden]="appcertainpassword.valid||appcertainpassword.pristine">两次输入不一致</p> </div> <div class="form-group"> <label for="appequal">相同</label> <input type="text" class="form-control" name="appequal" [(ngmodel)]="model.appequal" #appequal="ngmodel" [equal]="'哈哈'" /> <p [hidden]="appequal.valid||appequal.pristine">与值不相符</p> </div> <div class="form-group"> <label for="appcomplex">复合条件</label> <input type="number" class="form-control" name="appcomplex" [(ngmodel)]="model.appcomplex" #appcomplex="ngmodel" [gte]="5" [max]="10" /> <p [hidden]="appcomplex.valid||appcomplex.pristine">大于等于5，最大是10</p> </div> <button type="submit" [disabled]="!validationform.form.valid" class="btn btn-default">submit</button> </form> </div>
view code
ts文件不需要做什么，所以就不贴了。
模型驱动
app-model-driven.component.ts
import { component, oninit } from '@angular/core';import { formgroup, formcontrol, validators } from @angular/forms;import { customvalidators } from 'ng2-validation'; @component({ selector: 'app-app-model-driven', templateurl: './app-model-driven.component.html', styleurls: ['./app-model-driven.component.css'] }) export class appmodeldrivencomponent implements oninit {public formgroup: formgroup; password:string=; constructor() { let password = new formcontrol('', [validators.required]); let certainpassword = new formcontrol('', customvalidators.equalto(password));this.formgroup = new formgroup({ field: new formcontrol('', customvalidators.rangelength([5, 9])), appgt:new formcontrol('', customvalidators.gt(10)), password:password, certainpassword:certainpassword, maxfield:new formcontrol('',[customvalidators.gt(10),customvalidators.max(20)]) }); } ngoninit() { } onsubmit(){} }
view code
app-model-driven.component.html
<div class="container"> <form [formgroup]="formgroup" (ngsubmit)="onsubmit()" #validationform2="ngform" > <div class="form-group" > <input class="form-control" name="field" type="text" formcontrolname="field"/> <p *ngif="validationform2.form.controls.field.errors?.rangelength">长度在5到9之间</p> <p>{{validationform2.form.controls.field.errors?.rangelength}}</p> </div> <div class="form-group" > <input class="form-control" name="appgt" type="number" formcontrolname="appgt"/> <p *ngif="validationform2.form.controls.appgt.errors?.gt">大于10</p> </div> <div class="form-group" > <input class="form-control" name="password" type="password" [(ngmodel)]="password" formcontrolname="password"/> <p *ngif="validationform2.form.controls.password.errors?.required">必填</p> <p>{{test.pristine}}</p> <input class="form-control" type="password" formcontrolname="certainpassword"/> <p *ngif="validationform2.form.controls.certainpassword.errors?.equalto">两次相同</p> </div> <div class="form-group" > <label for="appmin">组合形式</label> <input type="number" class="form-control" name="appmin" formcontrolname="maxfield" /> <p [hidden]="!validationform2.form.controls.maxfield.errors?.max &&!validationform2.form.controls.maxfield.errors?.gt">取值大于等于10且小于20</p> </div> <button type="submit" [disabled]="!validationform2.form.valid" class="btn btn-default">submit</button> </form> </div>
view code
以上就是angular2之ng2-validation学习的详细内容。