ng2-validation/angular2表单验证模块使用方法（赞、实用）

原文出处：https://blog.csdn.net/piaodangdeyouzi/article/details/77477688 

延伸阅读：angular2表单验证之ng2-validation学习 (模板驱动表单 和 模型驱动表单 分别说明, 比较详尽)

案例
https://segmentfault.com/a/1190000008631742   （模板驱动表单 和 模型驱动表单 混合使用，实用性更强）

Demo
https://yuyang041060120.github.io/ng2-validation/index.html

源码
https://github.com/yuyang041060120/ng2-validation

重点：
       验证是在组件中定义的变量，通过界面中的 #username="ngModel"定义来进行验证的，和[(ngModel)]="username"无关

 <form #myForm="ngForm">
     <div>
         <input type="text" [(ngModel)]="form.username" name="username" #username="ngModel" class="form-control"/>
         <p class="text-danger" *ngIf="username.errors?.rangeLength">输入字符长度在5-9之间</p>
      </div>
    ...
  </form>

所以上面代码中，既有模板驱动表单（ngForm）中用到的：ngModel 和 name, 也有模型驱动表单常用的 #username="ngModel"

复杂的校验，可以在constructor构造函数进行初始化，如下

  // 定义表单组
  form:FormGroup;

  constructor() {
    // 初始化表达组里面的内容
    this.form = new FormGroup({
      username: new FormControl('', CustomValidators.range([5, 9])),
      ...
      phone: new FormControl('', CustomValidators.phone('zh-CN'))
    });
  }

简单的校验，可以直接在模板中进行定义，如下

 <form #myForm="ngForm">
     <div>
         <input type="text" [(ngModel)]="form.username" name="username" #username="ngModel" [rangeLength]="[5, 9]"
             class="form-control" required/>
         <p class="text-danger" *ngIf="username.errors?.rangeLength">输入字符长度在5-9之间</p>
      </div>
    ...
  </form>