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

不念不忘少年蓝@ 2022-05-17 06:08 180阅读 0赞

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

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

案例  
[https://segmentfault.com/a/1190000008631742][https_segmentfault.com_a_1190000008631742]   （**模板驱动表单** 和 **模型驱动表单** 混合使用，实用性更强）  
  
Demo  
[https://yuyang041060120.github.io/ng2-validation/index.html][https_yuyang041060120.github.io_ng2-validation_index.html]  
  
源码  
[https://github.com/yuyang041060120/ng2-validation][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>

[https_blog.csdn.net_piaodangdeyouzi_article_details_77477688]: https://blog.csdn.net/piaodangdeyouzi/article/details/77477688
[angular2_ng2-validation_]: https://www.cnblogs.com/xuduo/p/7146707.html
[https_segmentfault.com_a_1190000008631742]: https://segmentfault.com/a/1190000008631742
[https_yuyang041060120.github.io_ng2-validation_index.html]: https://yuyang041060120.github.io/ng2-validation/index.html
[https_github.com_yuyang041060120_ng2-validation]: https://github.com/yuyang041060120/ng2-validation