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. @Component({
5. selector: ‘app-app-model-driven‘,
6. templateUrl: ‘./app-model-driven.component.html‘,
7. styleUrls: [‘./app-model-driven.component.css‘]
8. })
9. export class AppModelDrivenComponent implements OnInit {
10. public formGroup: FormGroup;
11. password:string="";
12. constructor() {
13. let password = new FormControl(‘‘, [Validators.required]);
14. let certainPassword = new FormControl(‘‘, CustomValidators.equalTo(password));
15. this.formGroup = new FormGroup({
16. field: new FormControl(‘‘,  CustomValidators.rangeLength([5, 9])),
17. appGt:new FormControl(‘‘, CustomValidators.gt(10)),
18. password:password,
19. certainPassword:certainPassword,
20. maxField:new FormControl(‘‘,[CustomValidators.gt(10),CustomValidators.max(20)])
21. });
22. }
23. ngOnInit() {
24. }
25. onSubmit(){}
26. }

复制代码

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

原文地址：https://www.cnblogs.com/ymh2013/p/9392329.html