angular2 ng2-validation 表单验证

1：安装模块

npm install ng2-validation --save

2：配置app.module.ts

import { FormsModule, <font color="Red">ReactiveFormsModule</font> } from '@angular/forms';
import {<font color="Red">CustomFormsModule</font>} from "ng2-validation";
...
imports: [
    FormsModule,
    <font color="Red">CustomFormsModule,</font>
    <font color="Red">ReactiveFormsModule</font>
  ],
...

3：表单验证有两种方式 <1> 模板驱动       <2>模型驱动

接下来我们看下 模板驱动  只有一个步骤 <1>  配置模版文件     ts文件不需要做什么
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>

 

接下来我们看下 模型驱动, 分两个步骤 <1> 配置组件.ts文件     <2> 配置模版文件
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(){}
}

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>

官方文档：ng2-validation

 

1：安装模块

1. npm install ng2-validation --save

复制代码

2：配置app.module.ts

1. import { FormsModule, <font color="Red">ReactiveFormsModule</font> } from '@angular/forms';
   
2. import {<font color="Red">CustomFormsModule</font>} from "ng2-validation";
   
3. ...
   
4. imports: [
   
5.     FormsModule,
   
6.     <font color="Red">CustomFormsModule,</font>
   
7.     <font color="Red">ReactiveFormsModule</font>
   
8.   ],
   
9. ...

复制代码

3：表单验证有两种方式 <1> 模板驱动       <2>模型驱动


接下来我们看下 模板驱动  只有一个步骤 <1>  配置模版文件     ts文件不需要做什么
app-ttemplate-driven.component.html

1. <div class="container">
   
2.   <form (ngSubmit)="onSubmit()" #validationForm="ngForm">
   
3.     <div class="form-group">
   
4.       <label for="appField">长度要求</label>
   
5.       <input type="text" required class="form-control" name="appField" [(ngModel)]="model.appField" #rangeLength="ngModel" [rangeLength]="[5, 9]">
   
6.       <p [hidden]="rangeLength.valid||rangeLength.pristine">长度在5到9之间</p>
   
7.     </div>
   
8.     <div class="form-group">
   
9.       <label for="appField2">长度要求2</label>
   
10.       <input type="text"  class="form-control" name="appField2" [(ngModel)]="model.appField2" #rangeLength2="ngModel" [rangeLength]="[0,5]">
    
11.       <p [hidden]="rangeLength2.valid||rangeLength2.pristine">长度要求</p>
    
12.     </div>
    
13.     <div class="form-group">
    
14.       <label for="appMin">最小值</label>
    
15.       <input type="number"  class="form-control" name="appMin" [(ngModel)]="model.appMin"  #appMin="ngModel" [min]="10" />
    
16.      <p [hidden]="appMin.valid||appMin.pristine">取值大于等于10</p>
    
17.     </div>
    
18.    <div class="form-group">
    
19.      <label for="appGt">大于</label>
    
20.      <input type="number" class="form-control" name="appGt" [(ngModel)]="model.appGt" #appGt="ngModel" [gt]="10" />
    
21.      <p [hidden]="appGt.valid||appGt.pristine">取值大于10</p>
    
22.    </div>
    
23.    <div class="form-group">
    
24.      <label for="appGte">大于等于</label>
    
25.      <input type="number" class="form-control" name="appGte" [(ngModel)]="model.appGte" #appGte="ngModel" [gte]="10" />
    
26.      <p [hidden]="appGte.valid||appGte.pristine">取值大于等于10</p>
    
27.    </div>
    
28.    <div class="form-group">
    
29.      <label for="appMax">最大值</label>
    
30.      <input type="number" class="form-control" name="appMax" [(ngModel)]="model.appMax" #appMax="ngModel" [max]="10" />
    
31.      <p [hidden]="appMax.valid||appMax.pristine">最小值10</p>
    
32.    </div>
    
33.     <div class="form-group">
    
34.      <label for="appLt">小于</label>
    
35.      <input type="number" class="form-control" name="appLt" [(ngModel)]="model.appLt" #appLt="ngModel" [lt]="10" />
    
36.      <p [hidden]="appLt.valid||appLt.pristine">值小于10</p>
    
37.    </div>
    
38.    <div class="form-group">
    
39.      <label for="appLte">小于等于</label>
    
40.      <input type="number" class="form-control" name="appLte" [(ngModel)]="model.appLte" #appLte="ngModel" [lte]="10" />
    
41.      <p [hidden]="appLte.valid||appLte.pristine">值小于等于10</p>
    
42.    </div>
    
43.    <div class="form-group">
    
44.      <label for="appRange">取值范围</label>
    
45.      <input type="number" class="form-control" name="appRange" [(ngModel)]="model.appRange" #appRange="ngModel" [range]="[10, 20]" />
    
46.      <p [hidden]="appRange.valid||appRange.pristine">取值大于等于10到小于等于20</p>
    
47.    </div>
    
48.    <div class="form-group">
    
49.      <label for="appDigits">数字</label>
    
50.      <input type="text" class="form-control" name="appDigits" [(ngModel)]="model.appDigits" #appDigits="ngModel" digits />
    
51.      <p [hidden]="appDigits.valid||appDigits.pristine">必须是uint</p>
    
52.    </div>
    
53.    <div class="form-group">
    
54.      <label for="appNumber">数字</label>
    
55.      <input type="text" class="form-control" name="appNumber" [(ngModel)]="model.appNumber" #appNumber="ngModel" number />
    
56.      <p [hidden]="appNumber.valid||appNumber.pristine">任何数字</p>
    
57.    </div>
    
58.    <div class="form-group">
    
59.      <label for="appUrl">链接</label>
    
60.      <input type="text" class="form-control" name="appUrl" [(ngModel)]="model.appUrl" #appUrl="ngModel" url />
    
61.      <p [hidden]="appUrl.valid||appUrl.pristine">合法的url</p>
    
62.    </div>
    
63.     <div class="form-group">
    
64.      <label for="appEmail">邮箱</label>
    
65.      <input type="text" class="form-control" name="appEmail" [(ngModel)]="model.appEmail" #appEmail="ngModel" email />
    
66.      <p [hidden]="appEmail.valid||appEmail.pristine">合法的邮箱地址</p>
    
67.    </div>
    
68.    <div class="form-group">
    
69.      <label for="appDate">日期</label>
    
70.      <input type="text" class="form-control" name="appDate" [(ngModel)]="model.appDate" #appDate="ngModel" date />
    
71.      <p [hidden]="appDate.valid||appDate.pristine">合法的日期</p>
    
72.    </div>
    
73.    <div class="form-group">
    
74.      <label for="appUuid">uuid</label>
    
75.      <input type="text" class="form-control" name="appUuid" [(ngModel)]="model.appUuid" #appUuid="ngModel" uuid="'all'" />
    
76.      <p [hidden]="appUuid.valid||appUuid.pristine">不是合法的uuid</p>
    
77.    </div>
    
78.    <div class="form-group">
    
79.      <label for="appPhone">电话</label>
    
80.      <input type="text" class="form-control" name="appPhone" [(ngModel)]="model.appPhone" #appPhone="ngModel" phone="CN" />
    
81.      <p [hidden]="appPhone.valid||appPhone.pristine">不是合法的电话号码</p>
    
82.    </div>
    
83.    <div class="form-group">
    
84.      <label >两次相同</label>
    
85.      <input class="form-control"  type="password" ngModel name="appPassword" #appPassword="ngModel" required/>
    
86.      <p [hidden]="appPassword.valid||appPassword.pristine">必填项</p>
    
87.      <input class="form-control"  type="password" ngModel name="appCertainPassword" #appCertainPassword="ngModel" [equalTo]="appPassword"/>
    
88.      <p [hidden]="appCertainPassword.valid||appCertainPassword.pristine">两次输入不一致</p>
    
89.    </div>
    
90.    <div class="form-group">
    
91.      <label for="appEqual">相同</label>
    
92.      <input type="text" class="form-control" name="appEqual" [(ngModel)]="model.appEqual" #appEqual="ngModel" [equal]="'哈哈'" />
    
93.      <p [hidden]="appEqual.valid||appEqual.pristine">与值不相符</p>
    
94.    </div>
    
95.     <div class="form-group">
    
96.      <label for="appComplex">复合条件</label>
    
97.      <input type="number" class="form-control" name="appComplex" [(ngModel)]="model.appComplex" #appComplex="ngModel" [gte]="5" [max]="10"  />
    
98.      <p [hidden]="appComplex.valid||appComplex.pristine">大于等于5，最大是10</p>
    
99.    </div>
    
100.     <button type="submit" [disabled]="!validationForm.form.valid" class="btn btn-default">Submit</button>
     
101.   </form>
     
102. </div>

复制代码

接下来我们看下 模型驱动, 分两个步骤 <1> 配置组件.ts文件     <2> 配置模版文件
app-model-driven.component.ts

1. import { Component, OnInit } from '@angular/core';
   
2. import { FormGroup, FormControl, Validators } from "@angular/forms";
   
3. import { CustomValidators } from 'ng2-validation';
   
4. 
   
5. @Component({
   
6.   selector: 'app-app-model-driven',
   
7.   templateUrl: './app-model-driven.component.html',
   
8.   styleUrls: ['./app-model-driven.component.css']
   
9. })
   
10. export class AppModelDrivenComponent implements OnInit {
    
11. public formGroup: FormGroup;
    
12. password:string="";
    
13.   constructor() {
    
14.     let password = new FormControl('', [Validators.required]);
    
15.   let certainPassword = new FormControl('', CustomValidators.equalTo(password));
    
16.     this.formGroup = new FormGroup({
    
17.             field: new FormControl('',  CustomValidators.rangeLength([5, 9])),
    
18.             appGt:new FormControl('', CustomValidators.gt(10)),
    
19.             password:password,
    
20.             certainPassword:certainPassword,
    
21.             maxField:new FormControl('',[CustomValidators.gt(10),CustomValidators.max(20)])
    
22.         });
    
23.   }
    
24. 
    
25.   ngOnInit() {
    
26.   }
    
27. onSubmit(){}
    
28. }

复制代码

app-model-driven.component.html

1. <div class="container">
   
2.   <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #validationForm2="ngForm" >
   
3.     <div class="form-group" >
   
4.       <input class="form-control" name="field"  type="text"  formControlName="field"/>
   
5.       <p *ngIf="validationForm2.form.controls.field.errors?.rangeLength">长度在5到9之间</p>
   
6.       <p>{{validationForm2.form.controls.field.errors?.rangeLength}}</p>
   
7.     </div>
   
8.    <div class="form-group" >
   
9.       <input class="form-control" name="appGt" type="number"  formControlName="appGt"/>
   
10.       <p *ngIf="validationForm2.form.controls.appGt.errors?.gt">大于10</p>
    
11.     </div>
    
12.     <div class="form-group" >
    
13.       <input class="form-control" name="password" type="password" [(ngModel)]="password" formControlName="password"/>
    
14.       <p *ngIf="validationForm2.form.controls.password.errors?.required">必填</p>
    
15.       <p>{{test.pristine}}</p>
    
16.       <input class="form-control" type="password" formControlName="certainPassword"/>
    
17.       <p *ngIf="validationForm2.form.controls.certainPassword.errors?.equalTo">两次相同</p>
    
18.     </div>
    
19.     <div class="form-group" >
    
20.       <label for="appMin">组合形式</label>
    
21.       <input type="number"  class="form-control" name="appMin" formControlName="maxField" />
    
22.      <p [hidden]="!validationForm2.form.controls.maxField.errors?.max &&!validationForm2.form.controls.maxField.errors?.gt">取值大于等于10且小于20</p>
    
23.     </div>
    
24.     <button type="submit" [disabled]="!validationForm2.form.valid" class="btn btn-default">Submit</button>
    
25.   </form>
    
26. </div>

复制代码

官方文档：ng2-validation