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

angular2 ng2-validation 表單驗證